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

Question

我有一个宽度为100%的div，我需要同一div的高度根据页面的像素宽度进行调整。原因是因为图像是在div的整个宽度上拉伸的，如果我设置了一个固定的高度，不同的分辨率会对它进行不同的渲染，图像看起来会被拉伸。

对此有css解决方案吗？

Answer 1

您可以将其保留为auto

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

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

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

Answer 2

您可以使用css media查询来做到这一点，请参阅http://www.w3.org/TR/css3-mediaqueries/

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

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

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