javascript - 如何根据浏览器的resiging自动沿div宽度调整div高度

Question

我正在努力使网站具有响应性。我为所有的 div 使用了自动高度。但是，对于特定的 div，我必须为浏览器的所有尺寸使用固定高度。但是，我不想在每个尺寸的设备/浏览器的媒体查询中手动设置高度，而是想自动/动态地进行。可能是 javascript/jQuery 可以做到。但是，我对 javascript/jQuery 了解不多。所以，我需要你的帮助。我的容器 div 的最大宽度:1280px；我有一个名为“#artwork”的子 div，其初始尺寸为:1065*695px。以 base 作为容器 div 的最大宽度和#artwork div 的初始高度，我想为浏览器的每次调整大小赋予#artwork 自动高度。

我不能给“#artwork”高度:auto，因为那个“#artwork”div 有很多大图像。但是，通过javascript，只有一张图片正常显示，通过向下滚动，人们可以一张一张地看到下一张图片。如果我给 height: auto 或使用 minimum-height 给“#artwork”，所有图像都会显示。我已经通过媒体查询将“艺术品”div 高度手动放置在不同类型的 css 文件中。但是，我想自动执行此操作，因此该比例非常适合每台设备上各种尺寸的浏览器。

以下是页面示例:
[删除了死链接]

#container {
   max-width: 1280px;
   margin: 0 auto;
   padding: 0;
   overflow: hidden;
   font-family: GandhiSansBold;
   position: relative;
}

#artwork {
   /*width: 1065px;*/
   width: 83.203%;
   height: 695px;
   margin: 0;
   float: left;
   overflow: hidden;
   margin-bottom: 10px;
}

请确保，如果浏览器尺寸太大，#artwork 高度在任何情况下都不能通过自动调整大小超过 height:695px。

Answer 1

http://f6design.com/journal/2011/10/18/responsive-elements-that-retain-their-aspect-ratio/

问题归结为在流畅的设计中保持纵横比。这条路已经走过很多路，并且存在许多漂亮的解决方案。我在上面列出一个。让我知道它是否也解决了嵌套 div 元素的问题。