CSS Bildgröße, wie füllen, nicht dehnen?

Ich habe ein Bild und möchte eine bestimmte Breite und Höhe (in Pixel) festlegen.

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

Wie fülle ich Bilder mit CSS auf eine bestimmte Größe und strecke sie nicht?

Beispiel für das Füllen und Strecken von Bildern:

Original Bild:

Gestrecktes Bild:

Gefülltes Bild:

Bitte beachten Sie, dass im gefüllten Bild Beispiel oben: Erstens, Bild 150x255 (beibehalten Seitenverhältnis) geändert wird, und dann, es abgeschnitten zu 150x100.

Wenn Sie das Bild als CSS-Hintergrund verwenden möchten, gibt es eine elegante Lösung. Verwenden Sie einfach coveroder containin der background-sizeCSS3-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 coverSie ein vergrößertes Bild erhalten, erhalten containSie ein verkleinertes Bild. In beiden Fällen bleibt das Pixel-Seitenverhältnis erhalten.

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

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

Dieser Ansatz hat den Vorteil, dass er gegenüber Retina-Displays gemäß der Kurzanleitung von Thomas Fuchs freundlich ist .

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

Sie können die CSS-Eigenschaft verwenden object-fit.

.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 eine Polyfüllung für IE: https://github.com/anselmh/object-fit

Verbesserung der obigen Antwort durch @afonsoduarte ( NICHT die akzeptierte) .
falls Sie Bootstrap verwenden

1. Bereitstellung width:100%für den Stil.
   Dies ist hilfreich, wenn Sie Bootstrap verwenden und möchten, dass das Image die gesamte verfügbare Breite ausdehnt.
   

2. Die Angabe der heightEigenschaft ist optional. Sie können sie nach Bedarf entfernen / behalten

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

3. Übrigens müssen die Attribute heightund widthfür das imageElement NICHT angegeben werden, da sie vom Stil überschrieben werden.
   es reicht also aus, so etwas zu schreiben.

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

Der einzige wirkliche Weg besteht darin, einen Container um Ihr Bild zu haben und Folgendes zu verwenden 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 Problem in CSS, das zu tun, was Sie wollen, und das Bild zu zentrieren. In jquery gibt es eine schnelle Lösung 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/

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 "Transformation" (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 "Double 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 "Double Wrapper AND Double Image" (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 bietet eine etwas bessere Unterstützung - Sie müssen die Breite ODER Höhe des Bildes einstellen!
• Mit den Präfixen hat Methode 2 auch anständige Unterstützung (ab ie9) - Methode 2 hat keine Unterstützung für Opera mini!
• Methode 3 verwendet zwei Wrapper - kann Breite UND Höhe überlaufen.
• Methode 4 verwendet ein Doppelbild (eines als Platzhalter). Dies bietet zusätzlichen Bandbreitenaufwand, aber noch bessere Crossbrowser-Unterstützung.

Methode 1 und 3 scheinen mit Firefox nicht zu funktionieren

Eine andere Lösung besteht darin, das Bild in einen Behälter mit der gewünschten Breite und Höhe zu legen. Mit dieser Methode müssten Sie das Bild nicht als Hintergrundbild eines Elements festlegen.

Dann können Sie dies mit einem imgTag tun und einfach eine maximale Breite und Höhe für das Element festlegen.

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 die Grenzen zu überschreiten oder zu verzerren.

Wenn Sie das Bild vertikal und horizontal zentrieren möchten, können Sie das Container-CSS ändern in:

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

Hier ist eine JS-Geige http://jsfiddle.net/9kUYC/2/

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

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

Es gibt wahrscheinlich eine elegantere Art, JavaScript zu erstellen, aber das 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();

• Kein CSS-Hintergrund
• Nur 1 Div, um es zu schneiden
• Auf minimale Breite angepasst, als das richtige Seitenverhältnis beizubehalten
• Aus der Mitte zuschneiden (vertikal und horizontal können Sie dies mit oben, lef & transform anpassen)

Seien Sie vorsichtig, wenn Sie ein Thema oder etwas verwenden. Oft wird die maximale Breite img bei 100% angegeben. Du musst keine machen. Teste 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%);
}

Ich habe geholfen, ein jQuery-Plugin namens Fillmore zu erstellen , das die background-size: coverBrowser unterstützt, die es unterstützen, und ein Shim für diejenigen hat, die dies nicht tun. Schau es dir an!

Ich denke, es ist ziemlich spät für diese Antwort. Ich hoffe auf jeden Fall, dass dies jemandem in Zukunft helfen wird. Ich hatte das Problem, die Karten eckig zu positionieren. Es werden Karten für eine Reihe von Ereignissen angezeigt. Wenn die Bildbreite des Ereignisses für die Karte groß ist, sollte das Bild durch Zuschneiden von zwei Seiten und einer Höhe von 100% angezeigt werden. Wenn die Bildhöhe lang ist, wird der untere Teil der Bilder zugeschnitten und die Breite beträgt 100%. Hier ist meine reine CSS-Lösung dafür:

HTML:

 <span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>

CSS

.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}

Versuchen Sie so etwas: http://jsfiddle.net/D7E3E/4/

Verwenden eines Containers mit Überlauf: versteckt

EDIT: @ Dominic Green hat mich geschlagen.

Dadurch werden Bilder bis zu einer bestimmten Größe gefüllt, ohne sie zu dehnen oder zu beschneiden

img{
    width:150px;  //your requirement size
    height:100px; //your requirement size

/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
    object-fit:scale-down;
}

Versuchen Sie Folgendes, um das Bild in den Vollbildmodus zu integrieren:

Hintergrundwiederholung: rund;

<div class="container">
     <img src="http://i.stack.imgur.com/2OrtT.jpg"/>
</div>

<style>
.container {
       width: 150px;
       height: 100px;
       overflow: hidden;
}
</style>