在做响应性布局的时候，为了自适应不同大小分辨率的设备屏幕，我门需要使用css3中的媒体查询来针对不同的分辨率设置宽度和高度，虽然这种方式是可以解决问题，但是解决方式并不是太好，并且很繁琐，当然我门也想过直接使用百分比设置图片的大小，比如width(宽度): 100%，height(高度)：100%; 但是设置图片等高度100%的时候并不生效，图片没有显示出来，因为没有设置具体的高度值，浏览器渲染的时候并没有高度。这里需要运用一个小技巧即可实现,padding用百分比做单位时是相对于容器的宽度来算的,所以你可以把高度设为0,内容自然溢出,设置个padding-bottom，如：

height:0; 
width:50%;
padding-bottom:30%

那么这个div的高宽比就是30%:50%，这样就实现了高度和宽度的等比例缩放