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

之前同事说padding-bottom 可以实现等比缩放响应式图片，当时忙，没有好好看……

今天特意思考了下，实现的css代码如下：

    .img-container {position: relative;padding-bottom: 20%;height: 0;overflow: hidden;background: red;}.img-container img {position: absolute;top: 0; left: 0;width: 100%; height: 100%;}

实现的html代码如下：

<div class="img-container"><img src="data:images/o_1.jpg" alt="" />
</div>

我理解实现方法解释如下：

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

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

转载于:https://www.cnblogs.com/websalon/p/3602324.html

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

css padding效果,CSS Padding（填充）
CSS Padding(填充) CSS Padding(填充)属性定义元素边框与元素内容之间的空间. Padding(填充) 当元素的 Padding(填充)(内边距)被清除时,所"释放&q ...
php中padding,css中padding填充详解
语法: padding:[ | ]{1,4} 默认值:看每个独立属性适用于:所有元素,除 table-row-group | table-header-group | table-footer-gr ...
VI编辑器 Search it Bottom, Continuing at Top
VI编辑器搜索字符串的时候会在底部出现"Search it Bottom, Continuing at Top" 或 "Search hit Top, Continuin ...
pkcs5 padding和pkcs7 padding的区别
pkcs5 padding和pkcs7 padding都是加密数据时用来填充数据的一种模式. 先说下block_size,即块大小.在加密算法中(如DES,AES,RSA),数据是分块加密的(为什么要 ...
html设置padding颜色,CSS Padding（填充）
CSS Padding(填充) CSS Padding(填充)属性定义元素边框与元素内容之间的空间. Padding(填充) 当元素的 Padding(填充)(内边距)被清除时,所"释放&q ...
CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
【响应式Web前端设计】HTML DOM padding 属性
定义和用法 padding 属性设置元素的内边距. padding 属性定义元素边框与元素内容之间的空间. 该属性可采取 4 个值: 如果规定一个值,比如 div {padding: 50px} - ...
android padding作用,android:padding和android:layout_margin的区别
简单点来说: android:padding是内边距,控件本身的内容与控件边缘的距离. android:layout_margin是外边距,控件与其他控件之间的距离. 下面以具体的例子来进行解释: 1 ...
卷积操作中的same padding与valid padding
最近在研究卷积神经网络,很多卷积操作里头都会有padding这个选项,以keras中的Conv2D为例,padding操作有valid,same,casual等,我只讨论same和valid这两种 ...
altium designer 中的top/bottom solder和top/bottom paste mask
转载请注明出处:http://blog.csdn.net/qq_26093511/article/details/51751936 1.top solder为助焊层,说白一点就是说,有这个层的地方就没 ...

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

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

最新文章

热门文章