zoukankan      html  css  js  c++  java
  • CSS 利用 `padding-bottom` 实现固定比例的容器

    复用 padding-bottom 可实现一块区域在窗口尺寸变化使始终保持自适应。对于响应式布局中的图片或视频来说比较有用。

    <div style="width: 100%; position: relative; padding-bottom: 56.25%;">
        <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">
            this content will have a constant aspect ratio that varies based on the width.
        </div>
    </div>

    16:9 容器的效果

    16:9 容器的效果

    其中 padding-bottom 的值与对应所形成容器的比例关系为容器宽除以高。

    The percentage is calculated with respect to the width of the generated box's containing block

    -- 来自 w3.org 的描述

    以下是常用比例与对应的百分比值:

    aspect ratio  | padding-bottom value
    --------------|----------------------
        16:9      |       56.25%
        4:3       |       75%
        3:2       |       66.66%
        8:5       |       62.5%

    相关资源

  • 相关阅读:
    UI
    OC之block
    web前端开发学习
    OC面向对象下之文件
    UIButton
    视图
    frame和bounds
    UIView
    UIWindow
    Hello friends!
  • 原文地址:https://www.cnblogs.com/Wayou/p/css_keep_ratio_by_padding_bottom.html
Copyright © 2011-2022 走看看