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