zoukankan      html  css  js  c++  java
  • 16:9+4:3

    <div class="proportion-box">
                <div class="box">
                    <div class="scale">
                        <div class="item">
                            <img src="../../../skin/zh_CN/images/skin/news-article.png">
                        </div>
                    </div>
                </div>
                <p>16:9</p>
            </div>
            <div class="proportion-box">
                <div class="box">
                    <div class="scale2">
                        <div class="item">
                            <img src="../../../skin/zh_CN/images/skin/news-article.png">
                        </div>
                    </div>
                </div>
                <p>4:3</p>
            </div>
    .proportion-box p{
        font-size: 16px;text-align: center;
        padding:10px 0;
        color:#999;
    }
    .proportion-box .box {width: 400px;overflow: hidden;border-radius: 4px;}
    .proportion-box .scale {width: 100%;padding-bottom: 56.25%;height: 0;position: relative;}
    .proportion-box .item {width: 100%;height: 100%;background-color: #ccc;overflow: hidden;position: absolute;}
    .proportion-box .scale2 {width: 100%;padding-bottom:75%;height: 0;position: relative;}

    box 用来控制宽度

    scale 用来实现宽高等比例

    1:1 padding-bottom:100%;

    4:3 padding-bottom:75%;

    16:9 padding-bottom:56.25%; 

  • 相关阅读:
    屯【水】题计划
    【BZOJ2157】旅游
    【BZOJ2143】飞飞侠
    【BZOJ1036】[ZJOI2008]树的统计Count
    flask基础
    数据分析之Matplotlib
    pycharm 快捷键
    数据分析之pandas02
    数据分析之pandas01
    隐匿函数,二分法 冒泡排序
  • 原文地址:https://www.cnblogs.com/luckyuns/p/13679670.html
Copyright © 2011-2022 走看看