css怎样实现一个自顺应容器

本文来自CSS入门教程栏目，文中为大家介绍了css实现一个宽高档比自顺应容器的办法，拥有一定的参照 价值，但愿可以帮忙到大家。我们可以通过vw视口单位来实现。

指标：

实现一个宽度自顺应，高度为宽度一半的容器。

一、思索怎样实现

这个题目相似于：我们在挪移端页面，上面有一张宽度 100% 的图片，要是我们没设定高度，则图片会依据原有尺寸，等比缩放。

我们可以借助这个设法，依据元素高度，来为元素设定一个响应比例的高度即可。

（举荐教程：CSS入门教程）

二、实现办法1 - 通过 vw 视口单位实现

所谓 视口单位 (viewport units)是相关于视口(viewport)的尺寸而言， 100vw 等于视口宽度的 100% ，即 1vw 等于视口宽度的1%。

我们就可以应用这个特性，实现挪移端的宽高档比自顺应容器。

HTML代码：

css代码：

*{
    margin:0;
    padding:0
}
.box{
    width:100%;
    height:51.5vw
}
.box img{ 
    width:100%; 
}

为何 .box 高度为 51.5vw 呢？

缘由是图片本来的尺寸是 884 * 455 的宽高比例，即 455 / 884 = 51.5% 。

这个办法比拟本来图片的等比缩放，有个长处：不管图片可否加载成功，容器高度始终是盘算完成，不会造成页面颤动，也不会造成页面重绘，从而提拔机能。

下面看看这种状况下，图片加载成功和失败的对照：

三、实现办法2 - 通过子元素 padding 实现

通过设定子元素的 padding 属性来实现，是比拼常用，也是结果比拼好的一种，这里需要了解的是： 子元素的 padding 属性百分比的值是先对父容器的宽度而言 。

这里看下面代码和结果图了解下：

HTML代码：

    我是王安全，pingan8787

css代码：

.box{
    width: 200px;
}
.text{
    padding: 10%;
}

剖析：

这里我们将父容器 .box 宽度设定为 200px ，子元素 .text 的 padding:10% ，因而 .box 的 padding 盘算效果为 20px ;

接下来联合主题，我们应用这个道理，来实现等比例的题目：

HTML代码：

css代码：

.box{
    width: 100%;
}
.text{
    overflow: hidden;
    height: 0;
    padding-bottom: 51.5%;
}
.box .text img{
    width: 100%;
}

这里 .text 的 padding-bottom: 51.5%; 也是按照首先个办法，用图片原始尺寸的宽高比盘算出来的，需要注意，这里将 .text 设定 height: 0; 会涌现高度比现实高的题目，因而为了不这个状况，就需要设定 height: 0; 。

相干视频教程举荐：css视频教程

以上就是css怎样实现一个自顺应容器的细致内容，更多请关注 百分百源码网 其它相干文章！