css利用padding百分比实现图片自适应高度-白红宇

css利用padding百分比实现图片自适应高度

阅读量：4316 次

发布时间：2019-06-06

本文共 634 字，大约阅读时间需要 2 分钟。

应用场景

宽高比率，实现图片自适应高度，防止图片加载过程高度为0，加载完图片高度撑起，它下面的div抖动问题

.works-item-t {    padding-bottom: 133%;    position: relative;}.works-item-t > img {    position: absolute;    width: 100%; height: 100%;}

可以看到，当把垂直方向padding值只使用padding-bottom表示的时候，如果没有text-align属性干扰，<img>元素的left:0;top:0是可以省略的。

对于这种图片宽度100%容器，高度按比例的场景，padding-bottom的百分比值大小就是图片元素的高宽比，就这么简单。

但，有时候，图片宽度并不是100%容器的，例如，图片宽度50%容器宽度，图片高宽比4:3，此时，CSS垂直方向百分比就666了，如下：

.img-box {    padding: 0 50% 66.66% 0;}

参考网址：

https://www.zhangxinxu.com/wordpress/2017/08/css-percent-padding-image-layout/

转载于:https://www.cnblogs.com/qdlhj/p/9938707.html

你可能感兴趣的文章