纯css实现容器高度随宽度等比例变化的四种解决方案

vslam 发布于2019-08-29 11:09 / 4021人阅读

摘要：除了增加了一个结构，但是相对与一个页面成百上千的代码来说，不值一提我们知道，容器如果不给定高度，它的高度会随着容器内部的元素变化而撑大，这个时候，我们在容器内部添加一张符合我们宽高比例的图片，给图片设置宽度高度。

使用一个隐藏的图片来实现

这个方法是我最推荐的，因为不需要考虑任何兼容性，PC移动完美运行。除了增加了一个dom结构，但是相对与一个页面成百上千的代码来说，不值一提

我们知道，div容器如果不给定高度，它的高度会随着容器内部的元素变化而撑大，这个时候，我们在容器内部添加一张符合我们宽高比例的图片，给图片设置宽度100%；高度auto。不管我们的父容器如何变化，内部的img宽度都是100%，图片是会严格按照比例i自动缩放的，相应的，我们内部的子容器的盖度也就会按照比例缩放了

  #container {
    width: 100%;
  }
  .attr {
    background-color: #008b57;
  }
  .attr img{
    width: 100%;
    height: auto;
  }

如果你觉得增加img标签多发了http请求，那么请继续往下看，神器base64图片编码帮你解决这个问题，由于我们的的图片只需要一个人形状而已，所以可以大胆的压缩，然后编码，连http请求都省了，嘎嘎~

使用vmin

这个单位也是css3的新单位(css3大法好~)，我们将父容器的宽度和高度定义为相同的vmin，这样父容器的高度和宽度就是相同值，这个时候，子容器的宽高值设为百分比，不管父容器大小如何变，子容器的高度和宽度比都是不会变的。

单位说明
vw 相对于视窗的宽度
vh 相对于视窗的高度
vmin 相对于视口的宽度或高度中较小的那个被均分为100单位的vmin
vmax 相对于视口的宽度或高度中较大的那个被均分为100单位的vmax

  #container{
  width: 100vmin;
  height: 100vmin;
  }

.attr {
  width: 50%;
  height: 50%;
  background-color: orange;
}

使用cale

cale()是css3的心特性，它的值可以是一个表达式，这里我们关心的是。calc中的百分比也是按照父容器的百分比垃圾算的

.attr{
  width:50%;
  height: calc(50%);
}

padding-bottom实现

这里方法非常巧妙，由于padding-bottom的属性值百分比是按照父容器的宽度来计算的，所以这里我们设置容器宽度为父容器的50%；padding-bottom也为50%；就都是父容器宽度的50%；显示出来就是一个完美的正方形了

看个代码：

容器云高度随内容变动 css activity的四种状态数据迁移的四种方法等比例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111455.html

元素auto宽高的影响因素

摘要：关于内联元素之前讨论的多是块级元素，而没有考虑到内联元素的情况。但巧合的是，在普通流定位中，内联元素宽度和高度规则却和块级元素绝对定位差不多，都只受内容大小影响。我们知道，元素在没有设置宽高的情况下，默认的宽高值都为auto。而这个auto到底是如何让元素自动拥有宽高的呢，也就是说，元素的宽度和高度到底会受到什么因素的影响？本文将通过一个例子来对这一问题一探究竟，HTML结构和初始c...

crelaber 2019-08-30 13:01 评论0 收藏0
【复习】CSS实现宽高等比自适应容器

摘要：于是我们就需要实现一个宽度自适应，高度为宽度一半的容器。一思考如何实现这个问题类似于我们在移动端页面，上面有一张宽度的图片，如果我们没设置高度，则图片会根据原有尺寸，等比缩放。我们就可以利用这个特性，实现移动端的宽高等比自适应容器。在最近开发移动端页面，遇到这么一个情况：当页面宽度 100% 时，高度为宽度一半，并随手机宽度变化依然是一半。于是我们就需要实现一个宽度自适应，高度为宽...

habren 2019-08-30 15:44 评论0 收藏0
【CSS练习】IT修真院--练习1-九宫格

摘要：用于显示日志信息及输入一些命令请求监听。可获得请求列表，点开某一项将看到数据头部数据。包含本次请求的请求方法状态码请求服务器的地址其他一些设置响应头部包含用户代理，帮服务器识别设备用预览。九宫格——用html+css制作一个网页一. 目标效果： showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述圆角...

Tecode 2019-08-29 15:34 评论0 收藏0
页面设计相关链接收集

摘要：浏览器版本国内电脑端浏览器版本统计年月年月屏幕分辨率上的分辨率统计网页设计中常见的宽高比常见显示设备的媒体查询标准百度统计的中国网民分辨率使用情况兼容性设置仅用于的样式设置渲染模式设置及渲染模式样式兼容性清单开发者指南的媒体查询实现方案专浏览器版本 StatCounter国内电脑端浏览器版本统计（15年8月~16年8月）；屏幕分辨率 W3Schools上的分辨率统计；网页设计中...

sean 2019-08-29 11:23 评论0 收藏0
页面设计相关链接收集

摘要：浏览器版本国内电脑端浏览器版本统计年月年月屏幕分辨率上的分辨率统计网页设计中常见的宽高比常见显示设备的媒体查询标准百度统计的中国网民分辨率使用情况兼容性设置仅用于的样式设置渲染模式设置及渲染模式样式兼容性清单开发者指南的媒体查询实现方案专浏览器版本 StatCounter国内电脑端浏览器版本统计（15年8月~16年8月）；屏幕分辨率 W3Schools上的分辨率统计；网页设计中...

supernavy 2019-08-20 11:26 评论0 收藏0