javascript - 动态设置基于相同的高度和边距宽度

Question

我正在创建一个响应式网站，我想根据它的宽度调整高度。这将是一个视差和响应式网站。为了网站的响应能力，我决定让容器元素自适应并根据媒体查询调整大小。然后，这个孩子将有 90% 左右的宽度。

我想编写 JS 或在 JQuery 的帮助下根据每个断点处的新宽度设置它的高度和边距。我认为这会更容易，然后尝试为每个断点设置一个新的“px”高度。而且由于我想要一些视差效果，我需要将 s 边距设置为 % 而不是像素，以便在多个设备上获得相同的效果。

如果其中任何一个没有意义，请告诉我。

非常感谢。

Answer 1

如果您希望宽度和高度相同，可以使用： width: 100vw;height: 100vw;

这是另一种解决方案，用于保持 16x9 纵横比的可调整大小的 div。 9/16*100=56.25%

http://jsfiddle.net/ks2jH/512/

CSS：

.aspectwrapper {
display: block; 
width: 90%; /* whatever width you like */
background-image: url('http://placehold.it/160x90');
background-size: cover;
background-repeat: no-repeat;    
}
.aspectwrapper::after {
padding-top: 56.25%; /* percentage of containing block _width_ */
display: block;
content: '';
}

HTML：

<div class="aspectwrapper">

</div>