web-dev-qa-db-fra.com

Mise à l'échelle de l'image CSS pour s'adapter à la zone sans déformer

Existe-t-il un moyen avec CSS ou autrement de faire tenir une image dans une zone. Disons que j'ai plusieurs images de différentes tailles et que je veux qu'elles tiennent toutes dans un div de 150px par 100px. Je ne veux pas mettre à l'échelle les images, car certaines peuvent être hautes et d'autres étroites, je veux simplement qu'elles tiennent dans cette zone avec le reste caché.

J'ai pensé à utiliser overflow:hidden mais il ne semble pas être caché dans IE6.

Des idées?

cssoverflowscaledistortion
26
Robin Knight

Vous devriez essayer d'utiliser ceci:

img{
  width: auto;
  max-width: 150px;
  height: auto;
  max-height: 100px;
}

Modifier: il semble que IE6 ne prend pas en charge les propriétés max-width et max-height. Cependant, vous pouvez implémenter la solution de contournement donnée ici: max-width, max-height pour IE6

Extrait (dans le cas où l'article lié cesse de fonctionner):

img {
  max-height: 100px;
  max-width: 100px;
  width: expression(document.body.clientWidth > 150? “150px”: “auto”);
  height: expression(document.body.clientHeight > 100? “100px”: “auto”);
}
35
Sang Suantak

Lorsque vous dites "tenir dans cette zone" avec le reste caché, j'ai l'impression que vous voulez que l'image ne soit pas réduite du tout et essentiellement recadre tout excès.

J'interprète peut-être que vous avez une mauvaise question, mais essayez ceci et voyez si cela produit l'effet que vous recherchez.

.img-holder {
  width: 150px;
  height: 150px;
  position: relative;
  overflow: hidden;
}
.img-holder img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
}
<div class="img-holder">
  <img src="http://img.playit.pk/vi/dH6NIe7wm4I/mqdefault.jpg" />
</div>
11
Jimmy Cleveland

Cela ne fonctionnera pas dans IE6 (comme requis par l'OP), mais pour être complet, vous pouvez obtenir l'effet requis sur les nouveaux navigateurs en utilisant background-size:cover De CSS3 et en définissant l'image comme image d'arrière-plan centrée. Ainsi:

div { 
  width:150px;
  height:100px;
  background-size:cover; 
  background-position:center center; 
  background-repeat:no-repeat; 
  background-image:url('somepic.jpg');
}
11
Dan

Cela a fonctionné pour moi:

img.perfect-fit {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
}

Il essaie de faire un "ajustement parfait" du conteneur, s'étirant pour s'adapter aux limites tout en conservant la proportion d'image. Je ne l'ai pas testé avec IE6.

JSFiddle: http://jsfiddle.net/4zudggou/

5
Sheharyar