Passendes Bild in Div

Question

Ich habe ein Problem mit der Anpassung Bild in div. Grundsätzlich sind divs die Kartenheader. Bilder sind in unterschiedlicher Orientierung und auch Größe. Was soll ich tun, um sie anzupassen?

Photo in div

Answer 1

Okay, ich habe das Problem behoben. Ich habe dem div Klasse zugewiesen.

<div class="fill"> 
 
    <img src="..."> 
 
</div>

und in CSS.

.fill { 
 
    max-width: 70%; 
 
    height: 100%; 
 
} 
 

 
.fill img { 
 
    width: inherit; 
 
    height: inherit; 
 
}

Answer 2

Ich benutze diesen Trick und funktioniert wirklich gut für mich:

<div class="card" style="background-image: url(...)"></div> 

Und das die CSS:

.card { 
    background-size: cover; 
    height: 400px; 
    width: 600px; 
} 

Der Punkt ist das Bild mit der cover Hintergrund maßstabs Sizing-Methode, die den größten Teil des Bildes zeigt und auch das gesamte Div abdeckt, so dass Ihre Artikel konsistent in der Größe sind.

Answer 3

Sie können beide Optionen versuchen:

.card-image { 
    background: url(...); 
    background-size: cover; 
} 

Zwei Anmerkungen: - etwa 7% der Browser Abdeckung nicht unterstützen; - die Verwendung von 'fixed' mit Hintergrund kann zu unvorhersehbaren Problemen führen. - Sie können auch versuchen, Hintergrundgröße: enthalten und sehen, ob es Ihnen bessere Ergebnisse gibt.

Ich würde auch empfehlen, etwas Platz für das Bild zu reservieren, bis es lädt, um zu vermeiden, Dokument Reflow wenn Bild beginnt neu zu laden.

.card-container { 
    position: relative; 
} 

.card-image { 
    padding-bottom: 56.25%; //for 16:9 ratio 
} 

.card-image img { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Answer 4

Hier ist ein Ansatz mit object-fit.

Füllen: Dadurch wird das Bild so gestreckt, dass es dem Elternteil entspricht, ohne das Seitenverhältnis zu berücksichtigen.

Enthalten: Behält das Seitenverhältnis bei, kann jedoch die Bildgröße vergrößern oder verkleinern. Niedrige Res-Skalierung kann verzerrt sein.

Cover: Behält das Seitenverhältnis des Bildes bei und passt auf den übergeordneten Container, schneidet aber höchstwahrscheinlich das Bild ab.

.img-container { 
 
    height: 300px; 
 
    width: 400px; 
 
    background-color: yellow; 
 
} 
 

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

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

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

<h1>Cover</h1> 
 

 
<div class="img-container"> 
 
    <img src="http://i.stack.imgur.com/BPfiX.jpg" class="cover" /> 
 
</div> 
 

 
<h1>Contain</h1> 
 
<div class="img-container"> 
 
    <img src="http://i.stack.imgur.com/BPfiX.jpg" class="contain" /> 
 
</div> 
 

 
<h1>Fill</h1> 
 
<div class="img-container"> 
 
    <img src="http://i.stack.imgur.com/BPfiX.jpg" class="fill" /> 
 
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Answer 5

Ich bin zu raten, was Sie wollen, habe ich auch den Beitrag gesehen, wo Sie Ihre eigene Frage beantwortet haben. Hier ist eine andere mögliche Lösung. Sie können damit spielen und die Container width und height mit unterschiedlichen Werten setzen.Ich habe zwei Bilder verwendet. Eine mit height>width und die andere mit height<width. hier ist auch fiddle

.img-container { 
 
    border: 2px dashed #f00; 
 
    line-height: 0; 
 
    text-align: center; 
 
} 
 
.img-container img { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div class="img-container"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/en/0/05/Doctor_Who_-_Current_Titlecard.png" alt="drwho"> 
 
</div> 
 
<div class="img-container"> 
 
    <img src="https://lh4.googleusercontent.com/-MkDsiF5-BXQ/AAAAAAAAAAI/AAAAAAAAKv0/dRBJk-2PGw4/s0-c-k-no-ns/photo.jpg" alt="who2" />