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

Sie können die Eigenschaft css verwenden object-fit . ("legt fest, wie der Inhalt eines ersetzten Elements, z. B. eines <img> o <video> sollte die Größe so angepasst werden, dass sie in den Container passt.")

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

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

Siehe Beispiel hier

Es gibt ein Polyfill für den IE: https://github.com/anselmh/object-fit

Verwandt: object-position (legt die Ausrichtung des Inhalts eines Elements innerhalb seines Rahmens fest).

Answer 2

Wenn Sie das Bild als CSS-Hintergrund verwenden möchten, gibt es eine elegante Lösung. Verwenden Sie einfach cover o contain im background-size CSS3-Eigenschaft.

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

Während cover erhalten Sie ein vergrößertes Bild, contain erhalten Sie ein verkleinertes Bild. In beiden Fällen bleibt das Pixel-Seitenverhältnis erhalten.

http://jsfiddle.net/uTHqs/ (mit Deckel)

http://jsfiddle.net/HZ2FT/ (mit contain)

Dieser Ansatz hat den Vorteil, dass er auch für Retina-Displays geeignet ist. Thomas Fuchs' Kurzanleitung.

Es ist erwähnenswert, dass die Browserunterstützung für beide Attribute schließt IE6-8 aus.

Answer 3

Erweiterung auf der akzeptierte Antwort von @afonsoduarte .
für den Fall, dass Sie bootstrap

---

Es gibt drei Unterschiede:

1. Bereitstellung von width:100% über den Stil.
   Dies ist hilfreich, wenn Sie Folgendes verwenden bootstrap und möchten, dass das Bild die gesamte verfügbare Breite einnimmt.

2. Die Angabe der height Eigenschaft ist optional, Sie können sie je nach Bedarf entfernen/beibehalten

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

3. Übrigens ist es NICHT erforderlich, die height y width Attribute auf der image Element, da sie durch den Stil überschrieben werden.
   Es reicht also aus, etwas in dieser Art zu schreiben.

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

Answer 4

Die einzige Möglichkeit besteht darin, einen Container um das Bild zu legen und die 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%;
}

Es ist ein Schmerz in CSS zu tun, was Sie wollen und zentrieren Sie das Bild, gibt es eine schnelle Lösung in Jquery wie:

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 5

CSS-Lösung, kein JS und kein Hintergrundbild:

Methode 1 "margin auto" (IE8+ - NICHT 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/

Methode 2 "transformieren" ( 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/

Methode 2 kann verwendet werden, um ein Bild in einem Container mit fester Breite/Höhe zu zentrieren. Beide können überlaufen - und wenn das Bild kleiner als der Container ist, wird es trotzdem zentriert.

http://jsfiddle.net/5xjr05dt/3/

Methode 3 "Doppelter Wrapper" ( IE8+ - NICHT 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/

Methode 4 "Doppelter Wrapper UND doppeltes Bild" ( 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/

• Methode 1 hat eine etwas bessere Unterstützung - Sie müssen die Breite ODER die Höhe des Bildes festlegen!
• Mit den Präfixen hat Methode 2 auch anständige Unterstützung ( ab ie9 ) - Methode 2 hat keine Unterstützung auf Opera mini!
• Methode 3 verwendet zwei Wrapper - kann Breite UND Höhe überlaufen.
• Bei Methode 4 wird ein doppeltes Bild verwendet (eines als Platzhalter), was zu einem gewissen zusätzlichen Bandbreiten-Overhead führt, aber eine noch bessere Crossbrowser-Unterstützung bietet.

Methode 1 und 3 scheinen mit Firefox nicht zu funktionieren