Maximale Breite im Bild verhindert Bild schrumpft

Question

Wenn ich einem Bild maximale Breite hinzufüge, verhindert es korrekt, dass das Bild breiter wird als die angegebene Größe, verhindert jedoch auch, dass das Bild kleiner wird, wenn das Browserfenster kleiner ist als die maximale Breite. Wenn ich denselben Stil mit einem div verwende, wird das div schmaler. (I in diesem Beispiel Inline-CSS für Einfachheit verwendet habe.)

<div style="max-width: 400px;background: red;">Div Test</div> 
<img alt="" src="myimage.jpg" style="max-width: 400px;"> 

In dem obigen Code, die div und img (richtig) bekommt nie größer als 400px. Wenn ich jedoch das Browserfenster einstelle, bleibt der img 400px, während der div schmaler wird.

Answer 1

Wenn Sie das Bild einem Prozentsatz geben für die margin wird es funktionieren, wie Sie es erwarten.

img { 
    max-width: 400px; 
    width: 100%; 
} 

Demo

Answer 2

Es gibt keine Notwendigkeit, die max-width: des Bildes als eine festgelegte Anzahl von Pixeln zu setzen, wenn der Behälter eine Schränkungsweite ist, stellt nur die img bis max-width: 100%

Answer 3

Sie müssen dem div eine explizite Breite (zB '100%) geben, sonst wird es die tatsächliche Breite des Bildes verwenden (implizite'width: auto') als Referenz, die geeignet ist, mehr als '100% ':

<img alt="" src="myimage.jpg" style="max-width: 400px; width: 100%;">