Wie kann ich ein div mit einem Bild füllen und dabei proportional bleiben?

Wenn ich richtig verstehe, was Sie wollen, können Sie die Breiten- und Höhenattribute aus dem Bild lassen, um das Seitenverhältnis und die Verwendung beizubehalten flexbox um die Zentrierung für Sie zu übernehmen.

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

<div class="fill">
    <img src="https://picsum.photos/id/237/320/240" alt="" />
</div>

JSFiddle hier.

Ich habe dies erfolgreich in IE9, Chrome 31 und Opera 18 getestet. Es wurden jedoch keine anderen Browser getestet. Wie immer müssen Sie Ihre speziellen Supportanforderungen berücksichtigen.

Es ist ein bisschen spät, aber ich hatte gerade das gleiche Problem und habe es endlich gelöst object-fit: cover mit Hilfe eines anderen Stackoverflow-Beitrags (https://stackoverflow.com/a/29103071).

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

Hoffe, das hilft noch jemandem.

Ps: Funktioniert auch zusammen mit max-height, max-width, min-width und min-height CSS-Eigenschaften. Es ist besonders praktisch bei der Verwendung von Längeneinheiten wie 100% oder 100vh oder 100vw um den Container oder das ganze Browserfenster zu füllen.

Alle Antworten unten sind behoben width und heightwodurch die Lösung “nicht reagiert”.

Um das Ergebnis zu erzielen, aber das Bild reaktionsfähig zu halten, habe ich Folgendes verwendet:

1. Platzieren Sie im Behälter ein transparentes GIF-Bild mit dem gewünschten Anteil
2. Geben Sie einem Bild-Tag einen Inline-CSS-Hintergrund mit einem Bild, das Sie in der Größe ändern und zuschneiden möchten

.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 

Das sollte es tun:

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

Eine alte Frage, die aber ein Update verdient, da es jetzt einen Weg gibt.

Die richtige CSS-basierte Antwort ist zu verwenden object-fit: coverwas wie funktioniert background-size: cover. Die Positionierung würde von übernommen object-position -Attribut, das standardmäßig zentriert ist.

Aber Es gibt keine Unterstützung dafür in IE / Edge-Browsern oder Android < 4.4.4. Ebenfalls, object-position wird von Safari, iOS oder OSX nicht unterstützt. Polyfills existieren, Objekt-Fit-Bilder scheint die beste Unterstützung zu geben.

Weitere Einzelheiten zur Funktionsweise der Eigenschaft finden Sie unter Artikel zu CSS-Tricks auf object-fit zur Erklärung und Demo.

Sie können dies mit CSS-Flex-Eigenschaften erreichen. Bitte beachten Sie den folgenden Code:

.img-container {
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}

<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

Ein einfacher Weg, den ich herausgefunden habe, ist die Verwendung von object-fit: cover auf dem Bild im Container

<div class="container"> 
  <img class="image" src="https://mymodernmet.com/wp/wp-content/uploads/2020/11/International-Landscape-Photographer-Year-PhotographER-1st-KelvinYuen-2.jpg">
</div>

.image { 
  height: 100%;
  width: 100%;
  object-fit: cover
}

.container {
  height: 100px; /*Set any dimensions you like*/
  width: 50px;
}

Soweit ich getestet habe, funktioniert dies unabhängig von den Abmessungen des zu verwendenden Bildes, und dies erfüllt den “besten Fall”, wie Sie in der Frage angeben, da das Ergebnis vertikal und horizontal zentriert ist.