CSS Image Größe, wie zu füllen, aber nicht strecken?

Question

Ich habe ein Bild und möchte ihm eine bestimmte Breite und Höhe (in Pixeln) geben

Aber wenn ich Breite und Höhe mit css einstelle ( width:150px; height:100px ), wird das Bild gestreckt, und es kann hässlich sein.

Wie man Füllen Sie Bilder mit CSS auf eine bestimmte Größe zu bringen, und nicht dehnbar es?

Beispiel für das Füllen und Dehnen eines Bildes:

Originalbild:

Gestrecktes Bild:

Gefülltes Bild:

Bitte beachten Sie, dass im obigen Beispiel des gefüllten Bildes zuerst die Größe des Bildes auf 150x255 (beibehaltenes Seitenverhältnis) geändert wird, und dann wird es Ausgeschnitten auf 150x100.

Answer 1

Solución no das ein Bild als Hintergrund benötigt und automatisch in der Größe angepasst wird, ohne dass es abgeschnitten oder verzerrt wird.

Eine andere Lösung besteht darin, das Bild in einem Container mit der gewünschten Breite und Höhe unterzubringen. Bei dieser Methode müssten Sie das Bild nicht als Hintergrundbild für ein Element festlegen.

Dann können Sie dies mit einer img Tag und legen Sie einfach eine maximale Breite und Höhe für das Element fest.

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>

Wenn Sie nun die Größe des Containers ändern, wird das Bild automatisch so groß wie möglich, ohne den Rahmen zu sprengen oder zu verzerren.

Wenn Sie möchten, dass das Bild zentrieren vertikal und horizontal können Sie den Container css zu ändern:

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

Hier ist ein JS Fiddle http://jsfiddle.net/9kUYC/2/

Answer 2

• Nicht mit css-Hintergrund
• Nur 1 Div zum Abschneiden
• Auf minimale Breite verkleinert, um das richtige Seitenverhältnis beizubehalten
• Beschneiden von der Mitte aus (vertikal und horizontal, Sie können das mit oben, links und transformieren einstellen)

Seien Sie vorsichtig, wenn Sie ein Theme oder ähnliches verwenden, denn diese deklarieren img max-width oft mit 100%. Du musst keine machen. Testen Sie es aus :)

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

Answer 3

Aufbauend auf @Dominic Green's Antwort mit jQuery, hier ist eine Lösung, die für Bilder, die entweder breiter sind als sie hoch sind oder höher als sie breit sind, funktionieren sollte.

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

Es gibt wahrscheinlich einen eleganteren Weg, das JavaScript zu verwenden, aber dieser funktioniert.

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 4

Nach dem Lesen der StackOverflow-Antworten lautet die einfache Lösung

.profilePosts div {

background: url("xyz");
background-size: contain;
background-repeat: no-repeat;
width: x;
height: y;

}

Answer 5

Ich habe bei der Entwicklung eines jQuery-Plugins namens Fillmore die die background-size: cover in Browsern, die es unterstützen, und verfügt über ein Shim für diejenigen, die es nicht unterstützen. Schauen Sie es sich an!