it-swarm.com.de

CSS-Bildskalierung, um in einen Bereich zu passen, der nicht verzerrt ist

Gibt es eine Möglichkeit mit CSS oder auf andere Weise, ein Bild in einen Bereich einzupassen? Nehmen wir an, ich habe mehrere Bilder in verschiedenen Größen und ich möchte, dass sie alle in einen Div von 150 x 100 Pixel passen. Ich möchte die Bilder nicht skalieren, da einige groß und andere schmal sein können. Ich möchte einfach, dass sie in diesen Bereich passen, während der Rest verborgen bleibt.

Ich dachte über die Verwendung von overflow:hidden aber es scheint nicht in IE6 versteckt zu sein.

Irgendwelche Ideen?

26
Robin Knight

Sie sollten dies versuchen:

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

Bearbeiten: IE6 unterstützt anscheinend keine Eigenschaften für maximale Breite und maximale Höhe. Sie können jedoch die hier angegebene Problemumgehung implementieren: max-width, max-height für IE6

Auszug (falls der verlinkte Artikel nicht mehr funktioniert):

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

Wenn Sie "In diesen Bereich einpassen" sagen, während der Rest verborgen ist, möchten Sie das Bild nicht verkleinern und im Grunde genommen überschüssiges Bild abschneiden.

Vielleicht interpretiere ich Ihre Frage falsch, aber probieren Sie es aus und prüfen Sie, ob der gewünschte Effekt erzielt wird.

.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

Dies funktioniert nicht in IE6 (wie vom OP gefordert), aber der Vollständigkeit halber können Sie den erforderlichen Effekt in neueren Browsern erzielen, indem Sie CSS3s background-size:cover Verwenden und das Bild als zentriertes Hintergrundbild festlegen. Wie so:

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

Das hat bei mir funktioniert:

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

Es wird versucht, eine "perfekte Passform" des Behälters zu erreichen, indem es sich an die Grenzen anpasst und dabei die Bildproportion beibehält. Habe es nicht mit IE6 getestet.

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

5
Sheharyar