CSS Taille de l'Image, comment remplir, pas étirer?

Vous pouvez utiliser la propriété css object-fit.

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

Voir l'exemple ici

Il y a un polyfill pour IE: https://github.com/anselmh/object-fit

Le seul vrai moyen est d'avoir un conteneur autour de votre image et d'utiliser overflow:hidden:

HTML

<div class="container"><img src="ckk.jpg" /></div>

CSS

.container {
    width: 300px;
    height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

C'est une douleur en CSS de faire ce que vous voulez et de centrer l'image, il y a une solution rapide dans jquery telle que:

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

Http://jsfiddle.net/x86Q7/2/

En fait, ceci est juste une dérivation de la réponse la plus upvoted de cette question (Pas celle acceptée).

Il y a deux différences:

1. Il N'est pas nécessaire de fournir les attributs height et width sur l'élément image car ils seront remplacés par le style.
   Il suffit donc d'écrire quelque chose comme ça.

   <img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" />
   

2. Fournir width:100% sur le style.
   Ceci est utile si vous utilisez bootstrap et l'image d'étirer toute la largeur disponible.
   Spécifier la propriété height est facultative, mais dans mon cas, c'était une bonne chose.

   .cover {
      object-fit: cover;
      width: 100%;
      height: 300px; /* optional, but in my case it was good */
   }
   

Solution CSS pas de JS et pas d'image d'arrière-plan:

Méthode 1 "margin auto" (IE8+ - pas FF!):

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  position:absolute; 
  top:0; 
  bottom:0; 
  margin: auto;
  width:100%;
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

Http://jsfiddle.net/5xjr05dt/

Méthode 2 "transformer" ( IE9+ ):

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}

div img{
  position:absolute; 
  width:100%;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

Http://jsfiddle.net/5xjr05dt/1/

La Méthode 2 peut être utilisée pour centrer une image dans un conteneur de largeur / hauteur fixe. Les deux peuvent déborder, et si l'image est plus petit que le conteneur, il sera toujours centré.

Http://jsfiddle.net/5xjr05dt/3/

Méthode 3 "double wrapper" (IE8+ - pas FF! ):

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: table;
    left: 50%;
}
.inner img {
    display: block;
    border: 1px solid blue; /* just for example */
    position: relative;
    right: 50%;
    opacity: .5; /* just for example */
}

<div class="outer">
  <div class="inner">
     <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

Http://jsfiddle.net/5xjr05dt/5/

Méthode 4 "à double enveloppe ET double image" ( IE8+ ):

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 50%;
    bottom: 0;
    display: table;
    left: 50%;
}
.inner .real_image {
    display: block;
    border: 1px solid blue; /* just for example */
    position: absolute;
    bottom: 50%;
    right: 50%;
    opacity: .5; /* just for example */
}

.inner .placeholder_image{
  opacity: 0.1; /* should be 0 */
}

<div class="outer">
  <div class="inner">
    <img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
    <img class="placeholder_image"  src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

Http://jsfiddle.net/5xjr05dt/26/

• La Méthode 1 a un support légèrement meilleur - vous devez définir la largeur OU la hauteur de l'image!
• avec les préfixes, la méthode 2 a également un support décent ( à partir d'ie9) - la méthode 2 n'a pas de support sur Opera mini!
• Méthode 3 utilise deux wrappers - peut déborder largeur et hauteur.
• La Méthode 4 utilise une double image (Une comme espace réservé ) cela donne une surcharge de bande passante supplémentaire,mais un meilleur support de crossbrowser.

Les méthodes 1 et 3 ne semblent pas fonctionner avec Firefox

Une autre solution consiste à placer l'image dans un conteneur avec la largeur et la hauteur désirées. En utilisant cette méthode, vous n'auriez pas à définir la photo comme image d'arrière-plan d'un élément.

Ensuite, vous pouvez le faire avec une balise img et simplement définir une largeur maximale et une hauteur maximale sur l'élément.

CSS:

.imgContainer {
    display: block;
    width: 150px; 
    height: 100px;
}

.imgContainer img {
    max-width: 100%;
    max-height: 100%;
}

HTML:

<div class='imgContainer'>
    <img src='imagesrc.jpg' />
</div>

Maintenant, lorsque vous modifiez la taille du conteneur, l'image grandira automatiquement aussi grande que possible sans sortir des limites ou fausser.

Si vous voulez centre de l'image verticalement et horizontalement, vous pouvez changer le conteneur css:

.imgContainer {
    display: table-cell;
    width: 150px; 
    height: 100px;
    text-align: center;
    vertical-align: middle;
}

Voici un violon JS http://jsfiddle.net/9kUYC/2/

Construire à partir de la réponse de @Dominic Green en utilisant jQuery, voici une solution qui devrait fonctionner pour les images qui sont soit plus larges qu'elles ne sont hautes ou plus hautes qu'elles ne sont larges.

Http://jsfiddle.net/grZLR/4/

Il y a probablement une façon plus élégante de faire le JavaScript, mais cela fonctionne.

function myTest() {
  var imgH = $("#my-img").height();
  var imgW = $("#my-img").width();
  if(imgW > imgH) {
    $(".container img").css("height", "100%");
    var conWidth = $(".container").width();
    var imgWidth = $(".container img").width();
    var gap = (imgWidth - conWidth)/2;
    $(".container img").css("margin-left", -gap);
  } else {
    $(".container img").css("width", "100%");
    var conHeight = $(".container").height();
    var imgHeight = $(".container img").height();
    var gap = (imgHeight - conHeight)/2;
    $(".container img").css("margin-top", -gap);
  }
}
myTest();

J'ai aidé à construire un plugin jQuery appelé Fillmore, qui gère le background-size: cover dans les navigateurs qui le supportent, et a un shim pour ceux qui ne le font pas.

Essayer quelque chose comme ceci: http://jsfiddle.net/D7E3E/4/

Utilisation d'un conteneur avec débordement: hidden

EDIT: @ Dominic Green m'a battu.

Cela remplira les images à une taille spécifique, sans l'étirer ou sans recadrage

img{
    width:150px;  //your requirement size
    height:100px; //your requirement size

/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
    object-fit:scale-down;
}

Je pense qu'il est assez tard pour cette réponse. De toute façon espère que cela va aider quelqu'un dans le futur. J'ai fait face au problème de positionnement des cartes en angle. Il y a des cartes affichées pour tableau d'événements. Si la largeur de l'image de l'événement est grande pour la carte, l'image doit être affichée en recadrant de deux côtés et en hauteur de 100 %. Si la hauteur de l'image est longue, la partie inférieure des images est recadrée et la largeur est de 100 %. Voici ma solution CSS pure pour ce:

HTML:

 <span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>

CSS

.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}