CSS Taille de l'image, comment la remplir, mais pas l'étirer ?

Question

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

Mais si je définis la largeur et la hauteur à l'aide de css ( width:150px; height:100px ), l'image sera étirée, et cela peut être laid.

Comment Remplir des images à une taille spécifique à l'aide de CSS, et pas d'étirement ça ?

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

Image originale :

Image étirée :

Image remplie :

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

Answer 1

Si vous souhaitez utiliser l'image comme arrière-plan CSS, il existe une solution élégante. Il suffit d'utiliser cover o contain dans le background-size Proprié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>

Alors que cover vous donnera une image à l'échelle, contain vous donnera une image réduite. Les deux préserveront le rapport d'aspect des pixels.

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

http://jsfiddle.net/HZ2FT/ (en utilisant le contenu)

Cette approche présente l'avantage d'être compatible avec les écrans Retina, conformément à la directive européenne sur la protection des données. Le guide rapide de Thomas Fuchs.

Il convient de mentionner que la prise en charge par les navigateurs des deux attributs exclut IE6-8.

Answer 2

Le seul moyen réel 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%;
}

Il est difficile de faire ce que vous voulez en CSS et de centrer l'image, mais il existe une solution rapide en jquery, par exemple :

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/

Answer 3

Solution pas nécessitant une image comme arrière-plan et qui se redimensionnera automatiquement sans être coupée ou déformée.

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

Alors vous pouvez le faire avec un img et définir simplement une largeur et une hauteur maximales pour 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 au maximum sans dépasser les limites ni se déformer.

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

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

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

Answer 4

En s'appuyant sur la réponse de @Dominic Green qui utilise jQuery, voici une solution qui devrait fonctionner pour les images qui sont soit plus larges que hautes, soit plus hautes que 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();

Answer 5

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

Utilisation d'un conteneur avec overflow : hidden

EDIT : @Dominic Green m'a battu.