html - 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 媒体查询来做到这一点，请参阅http://www.w3.org/TR/css3-mediaqueries/

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

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

显然将宽度和高度组合更改为您需要的任何内容，您还可以根据需要使用 max-width 或 width