Stoppen Sie ein IMG mit einer expliziten Inline-Breite, die größer als das übergeordnete div ist.

Question

Ich habe vom Benutzer generierten Inhalt, der skaliert werden muss, um in den übergeordneten Container zu passen. Ich habe keine Kontrolle über irgendetwas in der div.

.container { 
 
    max-width: 300px !important; 
 
    border: 1px solid black; 
 
}

<div class="container"> 
 
    <p><img style="width: 800px;" src="http://placekitten.com/g/800/200"><br></p> 
 
    
 
    <p> 
 
    Other content 
 
    </p> 
 
    <p> 
 
    CSS IS AWESOME 
 
    </p> 
 
    
 
</div>

Wie halte ich den Inhalt gebunden?

Answer 1

So müssen Sie angeben, für alle Kinder auf jeder Ebene max Höhe von 100% des Eltern-Elements haben :)

.container { 
 
    max-width: 300px; 
 
    border: 1px solid black; 
 
} 
 
.container *{ 
 
    max-width:100%; 
 
}

<div class="container"> 
 
    <p><img style="width: 800px;" src="http://placekitten.com/g/800/200"><br></p> 
 
    
 
    <p> 
 
    Other content 
 
    </p> 
 
    <p> 
 
    CSS IS AWESOME 
 
    </p> 
 
    
 
</div>

Und ich würde Sie bekommen vorschlagen los! wichtig, wenn nichts anderes Element ändert, also würde CSS-Name für Wort Cascading :) gerechtfertigt werden

Answer 2

Ich bin nicht sicher, warum Sie die Bildbreite inline auf eine gesetzte Pixelbreite einstellen, aber dieses stellt sicher, dass das Bild nie übersteigt s die Grenzen es Container ist:

CSS:

img { 
    max-width: 100% !important; 
}