html - divはページ幅に応じて高さを自動調整します

Question

width:100% の div があり、同じ div の高さをページの幅のピクセル数に応じて調整する必要があります。その理由は、画像が div の幅全体に引き伸ばされているためです。高さを固定すると、解像度が異なるとレンダリングが異なり、画像が引き伸ばされて見えます。

これに対するcssソリューションはありますか？

score 1 · Accepted Answer

次のように残すことができますauto：

<div id="mydiv"><img src="..." /></div>

#mydiv,#mydiv>img{width:100%; /*height:auto;*/}

height:autoはデフォルト値なので省略できます。

score 1 · Accepted Answer

基本的に、次のような一連のメディアクエリがあります。

@media (min-width: 1024px) { 
  div {height: 200px;}
}

明らかに幅と高さの組み合わせを必要に応じて変更し、必要に応じて max-width または width を使用することもできます

2 に答える 2