Taille d'image CSS, comment remplir, pas étirer?

J'ai une image et je veux lui donner une largeur et une hauteur spécifiques (en pixels)

Mais si je règle la largeur et la hauteur à l'aide de css ( width:150px; height:100px), l'image sera étirée et elle peut être moche.

Comment remplir des images à une taille spécifique en utilisant CSS, sans l'étirer ?

Exemple d'image de remplissage et d'étirement:

Image originale:

Image étirée:

Image remplie:

Veuillez noter que dans l'exemple d'image remplie ci-dessus: d'abord, l'image est redimensionnée à 150x255 (rapport d'aspect maintenu), puis elle est rognée à 150x100.

Si vous souhaitez utiliser l'image comme arrière-plan CSS, il existe une solution élégante. Utilisez simplement coverou containdans la background-sizepropriété CSS3.

.container {
  width: 150px;
  height: 100px;
  background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

<div class="container"></div>​

Tandis que cover vous donnera une image agrandie, containvous donnera une image réduite. Les deux conserveront le rapport hauteur / largeur des pixels.

http://jsfiddle.net/uTHqs/ (en utilisant la couverture)

http://jsfiddle.net/HZ2FT/ (en utilisant contain)

Cette approche a l'avantage d'être conviviale avec les écrans Retina selon le guide rapide de Thomas Fuchs.

Il convient de mentionner que la prise en charge du navigateur pour les deux attributs exclut IE6-8.

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

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

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

Voir l'exemple ici

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

Amélioration de la réponse ci - dessus par @afonsoduarte ( PAS celle acceptée) .
au cas où vous utilisez bootstrap

1. Fournir width:100%sur le style.
   Cela est utile si vous utilisez le bootstrap et souhaitez que l'image s'étire sur toute la largeur disponible.
   

2. La spécification de la heightpropriété est facultative, vous pouvez la supprimer / la conserver selon vos besoins

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

3. Soit dit en passant, il n'est PAS nécessaire de fournir les attributs heightet widthsur l' imageélément car ils seront remplacés par le style.
   il suffit donc d'écrire quelque chose comme ça.

   <img class="cover" src="url to img ..."  />

La seule vraie façon 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 pénible en CSS de faire ce que l'on veut et de centrer l'image, il y a une solution rapide dans jquery comme:

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/

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

Méthode 1 "marge automatique" (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 à largeur / hauteur fixe. Les deux peuvent déborder - et si l'image est plus petite que le conteneur, elle sera toujours centrée.

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 wrapper 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 offre un meilleur support - 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 de ie9) - La méthode 2 n'a pas de support sur Opera mini!
• La méthode 3 utilise deux enveloppes - peut déborder de la largeur ET de la hauteur.
• La méthode 4 utilise une double image (une comme espace réservé), ce qui donne une surcharge de bande passante supplémentaire, mais un meilleur support croisé.

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

Une autre solution consiste à mettre l'image dans un récipient de la largeur et de la hauteur souhaitées. En utilisant cette méthode, vous n'auriez pas à définir l'image comme image d'arrière-plan d'un élément.

Ensuite, vous pouvez le faire avec une imgbalise et définir simplement 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>

Désormais, lorsque vous modifiez la taille du conteneur, l'image s'agrandit automatiquement autant qu'elle peut sans sortir des limites ni se déformer.

Si vous souhaitez centrer l'image verticalement et horizontalement, vous pouvez changer le conteneur CSS pour:

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

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

À partir de la réponse de @Dominic Green à l'aide de jQuery, voici une solution qui devrait fonctionner pour des images qui sont soit plus larges que hautes, soit plus hautes qu'elles ne sont larges.

http://jsfiddle.net/grZLR/4/

Il existe 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();

• Ne pas utiliser le fond CSS
• Seulement 1 div pour le couper
• Redimensionné à la largeur minimale que garder le rapport d'aspect correct
• Recadrer à partir du centre (verticalement et horizontalement, vous pouvez ajuster cela avec le haut, lef & transformer)

Soyez prudent si vous utilisez un thème ou quelque chose, ils déclarent souvent img max-width à 100%. Tu dois en faire aucun. Testez-le :)

https://jsfiddle.net/o63u8sh4/

<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>


div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  min-width:100%;
  min-height:100%;
  height:auto;
  position:relative;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

J'ai aidé à construire un plugin jQuery appelé Fillmore , qui gère les background-size: covernavigateurs dans qui le prennent en charge, et a un shim pour ceux qui ne le font pas. Donnez-lui un coup d'oeil!

Je pense qu'il est assez tard pour cette réponse. Quoi qu'il en soit, j'espère que cela aidera quelqu'un à l'avenir. J'ai rencontré le problème de positionnement angulaire des cartes. Il y a des cartes affichées pour un éventail 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 des deux côtés et une hauteur de 100%. Si la hauteur de l'image est longue, la partie inférieure des images est rognée et la largeur est de 100%. Voici ma solution CSS pure pour cela:

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;
}

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

Utilisation d'un conteneur avec débordement: caché

EDIT: @Dominic Green m'a battu.

Cela remplira les images à une taille spécifique, sans les étirer ni les recadrer

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;
}

Pour adapter l'image en plein écran, essayez ceci:

fond-répétition: rond;

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

<style>
.container {
       width: 150px;
       height: 100px;
       overflow: hidden;
}
</style>