div根据页面宽度自动调整高度

Question

我有一个宽度为100％的div，我需要根据页面的宽度来调整相同div的高度。原因是因为图像在div的整个宽度上被拉伸，如果我设置一个实心高度，不同的分辨率将以不同的方式呈现它，并且图像看起来伸展开来。

这有解决方案吗？

Answer 1

您可以将其保留为auto：

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

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

您可以省略height:auto，因为它是默认值。

Answer 2

您可以使用css媒体查询来查看http://www.w3.org/TR/css3-mediaqueries/

基本上你会有一堆媒体查询，如下所示：

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

显然可以根据需要更改宽度和高度组合，也可以根据需要使用最大宽度或宽度