通过padding-bottom或者padding-top实现等比缩放响应式图片

原创 wangjian 随笔 css 162阅读 2018-06-14 14:15:42 举报

padding-bottom 可以实现等比缩放响应式图片,实现的html代码如下:

css代码如下:

我理解实现方法解释如下:
1、设置父元素div.img-containe的高度为0,设置padding-bottom的值为图片的宽高百分比。
2、与子元素img相对父元素绝对定位,然后高度,宽度为百分之百,自然而然图片的实际宽高是padding-bottom的值乘以父元素的实际宽度,从而实现等比缩放响应式图片。

实现原理:让子元素宽高比例与父元素相同

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复