Responsive Bilder, ohne 100% Breite zu sein, wenn der Container größer ist - Container sind Flexbox

Question

Ich habe ein zweispaltiges Layout - feste rechte Spaltenbreite, ein skalierbarer Inhalt in der linken Spalte.

Das Layout skaliert hervorragend mit verschiedenen Bildschirmgrößen, bis ich der skalierbaren Spalte Bilder hinzufüge. Wenn der Container auf die Größe des Bildes herunterkommt, drückt er die Spalte zu weit und zerquetscht meine 300px rechte Spalte.

Ich habe

width:100%; 

auf die Bilder, die das Ansprechverhalten Problem löst, aber wenn der Behälter wieder Vollbild ist skaliert die Bilder um sie zu füllen, was nicht, was ich will, weil es Müll aussieht. Ich habe hinzugefügt

max-width:100%; 

was nicht geholfen hat.

Kurz gesagt, ich möchte das Bild Verhalten sein "Sei deine wahre Größe, es sei denn, der Behälter ist kleiner, in diesem Fall schrumpfen."

(Ich sollte erwähnen, dass meine zweispaltigen Layout mit Flexbox erfolgt)

Edit: Nachdem das Spiel mit dieser für Alter, es stellt sich heraus, ein Unterschied im Verhalten zwischen broswers zu sein - Chrom skaliert den Behälter , verkleinert das Bild (entsprechend der maximalen Breite), aber Firefox schiebt einfach den ganzen Inhalt raus. Öffnen Sie dieses in jedem: https://jsfiddle.net/andyg1/sb7zefr5/

Answer 1

Nach der Identifizierung, dass das Problem zwischen Firefox und Chrome anders habe ich einige der Forschung, um herauszufinden, dass das Problem durch das Hinzufügen behoben werden kann:

min-width:0; 

zu dem Element, das das Responsive enthält. Wie hier diskutiert: Firefox flexbox image width

Answer 2

Entfernen Sie width:100%; und behalten max-width:100%;. Dadurch bleiben die Bilder in ihrer Originalgröße erhalten, sie werden jedoch auf 100% verkleinert, wenn der Behälter kleiner ist.

Hier ist ein Beispiel https://jsfiddle.net/v4kL409v/

Answer 3

können Sie width: 100% verwenden und die reale Größe, wenn das Bild oder die maximale Größe der Transportwagen als max-width zum Beispiel

my_image { 
    width: 100%; 
    max-width: 320px; 
} 

diese Weise ist es mit dem Behälter schrumpft , aber nicht über einer festgelegten Größe wachsen.

Answer 4

Fügen Sie display:block zum Bild hinzu.

.my_image { 
    display:block; 
    max-width:100%; 
    height:auto; 
} 

Answer 5

Sie können ein Bild als Hintergrund für Ihr Flex-Element verwenden.

background-image, background-repeat, background-position, and most importantly background-size

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 
.flex { 
 
    display: flex; 
 
    justify-content: center; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.bg { 
 
    width: 50vw; 
 
    height: 50vh; 
 
    background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat center; 
 
    background-size: contain; 
 
    outline: 3px dashed red; 
 
    flex: 1 0 50%; 
 
} 
 
.rt { 
 
    width: 300px; 
 
    height: 50vh; 
 
    outline: 3px dashed blue; 
 
}

<div class="flex"> 
 
    <figure class="bg"></figure> 
 
    <figure class="rt"></figure> 
 
</div>