css里设定图片宽高比例数值（适用于响应页面或宽度占满屏的设计）

这个方法适用于响应页面或宽度占满屏的设计，不必担心后台上传新图片时由于尺寸问题造成页面排版乱掉，也不用写媒体查询来固定高度。

1、设定宽高比例1:1

<div class="picbox">
    <img src="images/news01.jpg">
</div>

<style type="text/css">
.picbox{
    position: relative;
    width: 25%;
}
.picbox:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.picbox img {
    position:  absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

2、设定宽高比例2:3

修改一个样式就可以了

<style type="text/css">
.picbox{
    position: relative;
    width: 25%;
}
.picbox:before {
    content: "";
    display: block;
    padding-top: 150%; //宽高比例修改这个数值
}

.picbox img {
    position:  absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
}
</style>