How to achieve div proportional scaling high width

This article is mainly for you to share a how to achieve div and other proportional scaling high-wide, with a good reference value, I hope to help you. Follow the small series together to see it.

1, plan one: response to do, according to the media query, set in different screen width of the height and width of the page, the specific settings to see how you respond to how to display

@media only screen and (min-width:100px) and (max-width:640px) {     div{width:100px; height:100px;         }} @media only screen and (min-width:641px) and (max-width:789px) {      div{width:200px; height:200px;          }}

2. Programme II: Percentage to do, here need to use a small technique, padding in percent when the unit is relative to the width of the container to calculate, so you can set the height of 0, the content naturally overflow,
Set a Padding-bottom
height:0;
width:50%;
padding-bottom:30%
So the height-to-width ratio of this div is 30%:50%.

  related recommendations:  
   
 Understanding Background-size in CSS3 (proportional scaling of responsive pictures)