À l'échelle une image de maximiser l'ajustement de l'espace disponible et le centre

Ceci peut être réalisé en CSS avec quelques changements

Les changements requis sont:

• Créer un nouveau .centerImage règle css. overflow: hidden; assure que l'image ne se renverse le conteneur. position: relative; est nécessaire que l'enfant img aurez besoin pour être en position absolue par rapport au conteneur.
• Créer un nouveau .centerImage img règle css. max-height: 100%; et max-width: 100% assure le ratio d'aspect est conservé intact. Réglage bottom, left, right et top à 0 et margin: auto; centres de l'image.
• Ajouter le centerImage classe à l'contenant divs.
• Changement .fill-vertical à height: 100%; qui fera le img remplir l'espace vertical.
• Changement .fill-horizontal à width: 100%; qui fera le img remplir l'espace horizontal.

CSS:

.container1 {
	border: 2px;
	border-color: red;
	border-style: solid;
	height: 300px;
	width: 500px;
}
.container2 {
	border: 2px;
	border-color: blue;
	border-style: solid;
	height: 500px;
	width: 300px;
}
.fill-vertical {
	height: 100%;
}
.fill-horizontal {
	width: 100%;
}
.centerImage {
	display: block;
	overflow: hidden;
	position: relative;
	text-align: center;
}
.centerImage img {
	bottom: 0;
	left: 0;
	margin: auto;
	max-height: 100%;
	max-width: 100%;
	position: absolute;
	right: 0;
	top: 0;
}

HTML:

<h1>Container 1, 500px x 300px, not filled</h1>
<div class="container1 centerImage">
	<img src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>
<h1>Container 1, filled vertically (should be horizontally centered)</h1>
<div class="container1 centerImage">
	<img class="fill-vertical" src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>
<h1>Container 300px x 500px, not filled</h1>
<div class="container2 centerImage">
	<img src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>
<h1>Container 300px x 500px, filled horizontally, should be vertically centered</h1>
<div class="container2 centerImage">
	<img class="fill-horizontal" src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>

http://jsbin.com/bupuwohica/2/

Plus des changements ci-dessus, il est possible de réaliser cela avec la propriété CSS object-fit

Pour ce faire, vous devez:

• Ajouter object-fit: contain; à l'image
• Ensemble height et width à 100%

Le seul inconvénient de cette est un navigateur soutien tandis que Firefox, Chrome, Safari et Opera ont pris en charge pendant un certain temps IE et Edge ne le font pas et nécessite un polyfill ou de secours.

CSS:

.container {
  border: 2px solid red;
  height: 200px;
  overflow: hidden;
  resize: both;
  width: 300px;
}
img {
  object-fit: contain;
  height: 100%;
  width: 100%;
}

HTML:

<p>The below div is resizable, drag the bottom right corner to see how the image scales</p>
<div class="container">
  <img alt="" src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0" />
</div>

https://jsfiddle.net/efyey801/

Oui c'est tout à fait possible. Il vous suffit de vous assurer que vous avez des "Limites" ou de limites à votre taille max pour X ou horizontal et Y ou des limites verticales. Une fois que vous savez le max dimensions alors vous pouvez faire ces constantes de comparer. La méthode la plus simple que je connaisse est de comparer X et Y en tant que Vecteurs de sorte que vous pouvez voir leur changement. Pour qu'il soit centré est aussi facile en ce moment:

(((horizontalScreenLimit - widthOfImage)/2), ((verticalScreenLimit - heightOfImage)/2)')