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

简介: 导语:我们经常会碰到这样的需求:要求div高度跟随宽度变化而变化。在手机端,一张图片作为div的背景图,图片宽高比不一致,并要求div宽高比与图片宽高比一致;怎么实现这种需求呢?原理padding-top: 50%;用这个属性的百分比,padding-top的百分比是相对于父元素的宽度,比如:...

导语:我们经常会碰到这样的需求:要求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>
相关文章
CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度
原文:CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度 如图:   1.自动换行 111111111111111111111111 2.限制宽高度 11111111111111111111111111  (注意:如果div放在li中还需...
3875 0
|
1月前
|
弹性计算
|
5月前
|
前端开发
你不知道的css——2. 百分比高度失效,绝对定位和非绝对定位元素的宽高百分比计算方法的不同
你不知道的css——2. 百分比高度失效,绝对定位和非绝对定位元素的宽高百分比计算方法的不同
80 1
|
5月前
|
前端开发
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
382 1
|
7月前
使用SDAutoLayout实现控件根据内容进行宽度自适应和高度自适应
使用SDAutoLayout实现控件根据内容进行宽度自适应和高度自适应
116 2
|
前端开发
CSS实现鼠标悬停图片向上浮动,放大,翻转
CSS实现鼠标悬停图片向上浮动,放大,翻转
322 0
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
|
前端开发 容器
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
765 1
|
JavaScript
textarea 动态宽高(根据内容动态撑开宽高)
textarea 动态宽高(根据内容动态撑开宽高)
467 0