目录
需求
最近 需要实现这样的效果
https://www.zhgcloud.com/source
其中 图片是响应式宽高等比缩放的
图片宽度和屏幕宽度成比例
图片高度和图片宽度成比例
思路
虽然 设置图片宽度和屏幕宽度成比例是有效的
width: w%; /* 有效 */
但是 设置图片高度和图片宽度成比例却是无效的
height: h%; /* 无效 */
因为
宽高百分比是相对于其父元素的
虽然 父元素宽度是已知的 但是
父元素高度默认是根据内容自适应的
所以 高度百分比是无效的
最终 我们实现的思路如下
自适应宽高等比缩放的块元素
添加占满该元素的图片子元素
自适应宽高等比缩放的块元素
这里 我们用到了Box Model
内边距的百分比是相对于盒子的宽度
<div>
</div>
div {
width: 100%;
padding-top: 40%;
background-color: red;
}
此时 自适应且宽高比是10:4 效果详见JSFiddle aspect-radio-01
添加占满该元素的图片子元素
这里 我们利用了position
<div>
</div>
div {
width: 100%;
padding-top: 40%;
position: relative;
}
img {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
}
此时 图片宽高比完全随父元素等比缩放 效果详见JSFiddle aspect-radio-02
挑战
最后 我们扩展该问题 实现这样的效果
aspect-radio-01.png
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
.item {
float: left;
width: 46%;
height: 0;
margin: 10px 2%;
padding-bottom: 30%;
background-color: #dbe0e4;
}
参考
更多文章, 请支持我的个人博客
