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

实现原理


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

vw 视口单位(viewport units) 实现


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

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

HTML 代码:

<div class="container">

<img alt="" src="https://newimg88.b0.upaiyun.com/newimg88/2018/12/css-selector.jpg" />

</div>

CSS 代码:

*{margin:;padding:}

.container{ width:100%;height:36.5vw }

.container img{ width:100%; }

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

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

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

用子元素的 padding 属性实现


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

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

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

HTML 代码:

<div class="container">

 <div class="content">

   <img alt="" src="https://newimg88.b0.upaiyun.com/newimg88/2018/12/css-selector.jpg" />

 </div>

</div>

CSS 代码:

.container{ width:100%; }

.content{

 overflow: hidden;

 height:;

 padding-bottom: 36.5%;

}

.container .content img{ width:100%; }

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

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

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

【CSS小技巧】 用 CSS 实现一个宽高等比自适应容器的更多相关文章

  1. 【CSS】318- CSS实现宽高等比自适应容器

    点击上方"前端自习课"关注,学习起来~ 在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半. 于是我们就需要实现一个宽度自 ...

  2. css小技巧,如何制作一个箭头符号

    首先上图: 第一种方法大家可能想到了,就是用背景图片制作箭头符号,但是下面介绍的不是这种方法. 在介绍通过border制作箭头符号之前,先看下下面的css代码: <!DOCTYPE html&g ...

  3. CSS 小技巧

    CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...

  4. 常用的CSS小技巧

    实际开发过程中会遇到一些需要用CSS小技巧处理的布局问题,现在分享几个个人工作中遇到的小问题和解决方案. 1.inline元素间的空白间隙 这里要介绍一个神器font-size:0. 如果你写了个列表 ...

  5. 小技巧!CSS 整块文本溢出省略特性探究

    今天的文章很有意思,讲一讲整块文本溢出省略打点的一些有意思的细节. 文本超长打点 我们都知道,到今天(2020/03/06),CSS 提供了两种方式便于我们进行文本超长的打点省略. 对于单行文本,使用 ...

  6. 前端小技巧:css sprite----V客学院技术分享

    前端小技巧:css sprite 因为英文名叫sprite,翻译过来是精灵,而雪碧饮料也叫sprite,所以叫精灵兔或者雪碧图. 它有什么作用呢? 当用户在浏览器里输入一个URL地址的时候,你会感觉无 ...

  7. css小技巧(1)

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  8. css高度已知,左右定宽,中间自适应三栏布局

    css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  9. 前端开发者应该知道的 CSS 小技巧

    一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CS ...

随机推荐

  1. Realtime Rendering 6

    [Realtime Rendering 6] 1.Lighting computations occur in two phases: 1)light phase. used to compute t ...

  2. new.target

    [new.target] The new.target property lets you detect whether a function or constructor was called us ...

  3. 如何搭建python+selenium2+eclipse的环境

    搭建python和selenium2的环境(windows) 1.下载并安装python(我用的是2.7的版本) 可以去python官网下载安装:http://www.python.org/getit ...

  4. python数据分析之matplotlib学习

    本文作为学习过程中对matplotlib一些常用知识点的整理,方便查找. 类MATLAB API 最简单的入门是从类 MATLAB API 开始,它被设计成兼容 MATLAB 绘图函数. from p ...

  5. Linux基石【第三篇】vim提示-bash:vim :common not found解决方法

    在Linux命令行输入vim时提示:-bash:vim :common not found,之后按着查询到的解决办法整好了: 解决步骤如下: 1.输入 rpm -qa|grep vim 命令,查看返回 ...

  6. Genymotion 模拟器上网出现 net::ERR_NAME_NOT_RESOLVED

    Genymotion 模拟器在公司网络安装的,然后启动能正常上网,把笔记本带回家,网络变化了,再使用模拟器 上网显示: (net::ERR_NAME_NOT_RESOLVED) 各种百度,最后用如下方 ...

  7. Delphi: TMethod转普通方法为对象方法

    回看旧时代码,以往清楚之记忆渐渐模糊,事隔多年,遗忘正在发生. TMethod方法,当初熟练再看已陌生,再做复习以作备忘. 简言之,它做为一相桥接,将普通事件或方法转换为类方法,其多用于事件动态设置中 ...

  8. polymorphism多态

    [概念] 方法名相同,具体操作根据类不同. eg 有open()方法的ebook, kindle 都会被打开 eg 动物叫声不同 inheritance:只有superclass subclass都有 ...

  9. java 基础之--nio 网络编程

    在传统的Java 网络编程中,对于客户端的每次连接,对于服务器来说,都要创建一个新的线程与客户端进行通讯,这种频繁的线程的创建,对于服务器来说,是一种巨大的损耗,在Java 1.4 引入Java ni ...

  10. Android沉浸式状态栏背景色以及字体颜色的修改

    在activity中设置透明状态栏 的思路:    1.让activity的布局全屏 此时布局会和状态栏重叠        2.让布局最上方预留出和状态栏高度一样的高度,将状态栏的背景色设置为透明 效 ...