zoukankan      html  css  js  c++  java
  • css利用padding百分比实现图片自适应高度

    应用场景

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

    重点:CSS百分比padding都是相对宽度计算的

    <div class="works-item-t">
        <img src="./150x200.png">
    </div>
    .works-item-t {
        padding-bottom: 133%;
        position: relative;
    }
    .works-item-t > img {
        position: absolute;
         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/

  • 相关阅读:
    Go 接口
    Go 参数传递
    Go 结构体
    Go 指针
    使用ContentType处理大量的外键关系
    django的render的特殊用法
    restframework中的那些参数你知道吗?
    scrapy框架
    numpy如何使用
    HTML 5 audio标签
  • 原文地址:https://www.cnblogs.com/qdlhj/p/9938707.html
Copyright © 2011-2022 走看看