当前位置: 首页 » 笔记 » 自适应纯CSS图片宽度高度始终保持比例

自适应纯CSS图片宽度高度始终保持比例

零分笔记3652023-01-31 01:39

自适应例如九宫格,图片或者DIV特别是图片宽度100%,如何让高度也能始终保持一个比例?避免出现高低不齐的现象!

1、利用JS控制,监听图片的宽度,再设置图片的高度

2、纯CSS设置图片宽度和高度始终保持比例

2.1、原理:利用padding-top(padding-bottom)的百分比计算是根据层宽度的宽度计算的,如层宽度100px,padding-top:20%就是20px;设置一个外层padding-top(padding-bottom)的空白空间,让内层去填充!如设置一个始终保持正方形的图片,将父层设置padding-top(padding-bottom)100%,宽度100%,高0,得到一个正方形空白空间,内层图片标签img设置position:absolute浮动左0,顶部0,高度100%,宽度100%(图片的高度宽度百分比是根据父层计算!) 填满父层padding出来的正方形空白空间!

2.2、实例:给img加一个父层imgbox

<div class="imgbox">
<img src="imgurl">
</div>

2.3、添加CSS

.imgbox{
position: relative;
width: 100%;
height: 0px;
padding-top: 100%; //padding-bottom都可以
}

.imgbox img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
END
零分站龄17年资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
2483
文章
13
分类
3785
标签
3
友链
onlinelovesky317355746vipsever@vip.qq.com