天天看点
返回

div高度自适应宽度按比例放大

导语：我们经常会碰到这样的需求：要求div高度跟随宽度变化而变化。在手机端，一张图片作为div的背景图，图片宽高比不一致，并要求div宽高比与图片宽高比一致；怎么实现这种需求呢？

原理

padding-top: 50%;

用这个属性的百分比，

padding-top

的百分比是相对于父元素的宽度，比如：父元素宽度

100px

，那子元素高度

50%

就是

50px

 
<header>
</header>
  <style>
    .parent{
      width: 120px;
    }
    .parent .child{
      width: 100%;
      height: 0;
      padding-top: 50%; // 实际为60px
    }
  </style>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
div内容高度 div自适应内容高度 css设置div system dll load加载 任务systemd服务target
上一篇: 经验分享：5个可以轻松实践的高效工作秘诀增加有效工作时间提高作战能力结后记
下一篇: 一篇文章深入浅出带你了解mybatis

继续阅读