[2分钟学个CSS小技巧] 用 CSS 实现一个宽高等比自适应容器

10年服务1亿Tian开发工程师

不知道怎么起个标题能更加清楚的说清楚我的意图,那就打个比方吧:比如我们在手机端上方一张宽度 100% 的图片,我们如果不设置图片的高度,那么这个图片会根据图片的原始尺寸等比缩放。今天我们要讲的就是实现这么一个类似于图片等比缩放的容器。

实现原理

了解了意图后我们就稍微讲一下实现原理。原理很简单,我们只要根据元素的宽度,为元素设置一个相应比例的高度就可以了。

vw 视口单位(viewport units) 实现

我们知道视口单位(viewport units)是相对于视口(viewport) 尺寸而言的。 100vw 等于视口宽度的 100% ,1vw 相对于等于视口宽度的 1%。那么这个特性特别适合在移动端实现宽高等比自适应容器。

比如我们还是实现一张宽度 100% 的图片。这样就很久简单了:

<div class="container">
 <img alt="" src="/newimg88/2018/12/css-selector.jpg" />
</div>
*{margin:0;padding:0}
.container{ width:100%;height:36.5vw }
.container img{ width:100%; }

.containerheight:36.5vw 是 图片的原始尺寸(800*292)的宽高比例,即 292/800=36.5%。

这个方法相对于图片等比缩放特性有个优点就是,无论图片是否加载完成,容器的高度始终在那里,不会造成页面抖动而影响用户体验,还有不会造成页面重绘提升性能。

当然在实际使用过程要考虑容器的 marginpadding 等因素,所以计算高度比例时估计需要 calc() 函数配合稍微多点计算。目前 vw,vh 等视口单位(viewport units)的浏览器支持情况应该很好了,但是你如果你要支持老的手机,那这个方法肯定就不适用了。

用子元素的 padding 属性实现

这是一个比较完美的解决方案,但是首先我们要明白一件事情:子元素的 padding 属性百分比的值是相对于父容器的宽度而言的。明白这一点特别重要,如图:

子元素的 padding 属性百分比的值是相对于父容器的宽度而言的

父元素 .container 宽度为 200px。子元素 .contentpadding:10% , 者 .contentpadding 计算出来是 20px

回到正题,我们来看上面例子的解决方案:

<div class="container">
  <div class="content">
    <img alt="" src="/newimg88/2018/12/css-selector.jpg" />
  </div>
</div>
.container{ width:100%; }
.content{ 
  overflow: hidden;
  height: 0;
  padding-bottom: 36.5%; 
}
.container .content img{ width:100%; }

.contentpadding-bottom: 36.5%; 是 图片的原始尺寸(800*292)的宽高比例,即 292/800=36.5%。这里特别需要注意的是 .contentheight: 0; 属性,没有 height: 0; 配合,你可能会得到意想不到的结果。

这里我特地把 *{margin:0;padding:0} 充值样式删除了,说明这个解决方案能最大限度的避免其他因素的影响。纯粹的进行宽高比例计算就可以了。而且这个解决方案没有浏览器兼容性问题。当然IE5.5除外(估计你都没见过IE5.5或者IE6长什么样,暴露年龄了)。

你可以缩放 demo 页面的浏览器尺寸试试,该容器始终保持相同的比例。

同样的我们也可以做个列表:

赞(7) 打赏
未经允许不得转载:WEBTian开发 » [2分钟学个CSS小技巧] 用 CSS 实现一个宽高等比自适应容器

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

Tian开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏