明示的なインライン幅が親divより大きいimgを停止

Question

親コンテナに収まるように拡大する必要があるユーザ生成コンテンツがあります。 私は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>

？

Answer 1

ですから、どのレベルのすべての子供たちのために指定する必要があります:)は、親要素の100％の最大の高さを持っている

.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>

そして、私はあなたを取り除くことをお勧めしたいです！重要なのは何も要素を変更していないのでCSS名がカスケードのために正当化されているかもしれません:)

Answer 2

イメージ幅をインラインで設定ピクセル幅に設定する理由はわかりませんが、

CSS：

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