动态设置 <div> 高度和边距基于相同 <div> 宽度

Question

I am creating a responsive site and I want to adjust a height based on it's width. This is going to be a parallax & responsive site. For the site's responsiveness, I decided to have a container element be adaptive and adjust size based on media queries. Then, this child will have a width of 90% or so.

I wanted to write either JS or with the help of JQuery to set the height & margins of this based on the new width at each break point. I think this would be easier then trying to set a new "px" height for each of these break points. And since I want to have some parallax effects, I need to set the s margins as % instead of pixels to get the same effect on multiple devices.

Please let me know if any of this doesn't make sense.

Thank you very much.

Answer 1

If you want the width and height to be the same, you could use: width: 100vw;height: 100vw;

Here is another solution, for a resizable div that maintains a 16x9 aspect ratio. 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>