Question

我正在创建一个响应式网站，我想根据它的宽度调整高度。这将是一个视差＆amp; amp;响应网站。为了网站的响应能力，我决定让容器元素具有自适应性，并根据媒体查询调整大小。然后，这个孩子的宽度将达到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>

动态设置<div> height＆amp;基于相同<div> width </div> </div>的边距

1 个答案: