zoukankan      html  css  js  c++  java
  • 2020-02-25 今天学了啥?

    CSS如何实现固定宽高比

    一、元素尺寸已知,直接写宽高

    二、尺寸未知,可替换元素(img、video等),指定宽度或者高度,另一个自动计算。

    <div class="wrapper">
      <img src="./picture" alt="">
    </div>


    .wrap{
      width50vw;
    }
    img{
      width100%;
      height: auto;
    }

    三、普通元素实现固定宽高比

    使用padding-top/padding-bottom实现

    <div class="wrapper">
      <div class="box"></div>
    </div>

    .wrap{
       50vw;
    }
    .box{
       100%;
      height: 0;
      padding: 0;
      padding-bottom: 75%;
    }

    上述使用padding-bottom来撑开盒子,实现4/3的比例。但是如果box盒子要放入内容的话,可以使用绝对定位来充满盒子。

    .box{
      position: relative;
      width100%;
      height0;
      padding0;
      padding-bottom75%;
      margin50px;
      background-color: lightsalmon;
    }
    .content {
      position: absolute;
      top0;
      right0;
      bottom0;
      left0;
    }
  • 相关阅读:
    反射遍历实体类
    Socket通讯实例-基本Socket
    c#向数据库插入较大数据(SqlBulkCopy)
    C#中(int)、int.Parse()、int.TryParse()和Convert.ToInt32()的区别
    jquery实现限制textarea输入字数
    jquery回车执行某个事件
    asp.net自定义404页面
    iis上json解析失败404
    echart 扩展地图不显示问题
    bootstarp 样式细节(tooltip布局)
  • 原文地址:https://www.cnblogs.com/ylweb/p/12364435.html
Copyright © 2011-2022 走看看