【CSS小技巧】 用 CSS 实现一个宽高等比自适应容器
不知道怎么起个标题能更加清楚的说清楚我的意图,那就打个比方吧:比如我们在手机端上放一张宽度 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%。
这个方法相对于图片等比缩放特性有个优点就是,无论图片是否加载完成,容器的高度始终在那里,不会造成页面抖动而影响用户体验,还有不会造成页面重绘提升性能。
当然在实际使用过程要考虑容器的 margin
,padding
等因素,所以计算高度比例时估计需要 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 实现一个宽高等比自适应容器的更多相关文章
- 【CSS】318- CSS实现宽高等比自适应容器
点击上方"前端自习课"关注,学习起来~ 在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半. 于是我们就需要实现一个宽度自 ...
- css小技巧,如何制作一个箭头符号
首先上图: 第一种方法大家可能想到了,就是用背景图片制作箭头符号,但是下面介绍的不是这种方法. 在介绍通过border制作箭头符号之前,先看下下面的css代码: <!DOCTYPE html&g ...
- CSS 小技巧
CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...
- 常用的CSS小技巧
实际开发过程中会遇到一些需要用CSS小技巧处理的布局问题,现在分享几个个人工作中遇到的小问题和解决方案. 1.inline元素间的空白间隙 这里要介绍一个神器font-size:0. 如果你写了个列表 ...
- 小技巧!CSS 整块文本溢出省略特性探究
今天的文章很有意思,讲一讲整块文本溢出省略打点的一些有意思的细节. 文本超长打点 我们都知道,到今天(2020/03/06),CSS 提供了两种方式便于我们进行文本超长的打点省略. 对于单行文本,使用 ...
- 前端小技巧:css sprite----V客学院技术分享
前端小技巧:css sprite 因为英文名叫sprite,翻译过来是精灵,而雪碧饮料也叫sprite,所以叫精灵兔或者雪碧图. 它有什么作用呢? 当用户在浏览器里输入一个URL地址的时候,你会感觉无 ...
- css小技巧(1)
1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...
- css高度已知,左右定宽,中间自适应三栏布局
css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 前端开发者应该知道的 CSS 小技巧
一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CS ...
随机推荐
- Realtime Rendering 6
[Realtime Rendering 6] 1.Lighting computations occur in two phases: 1)light phase. used to compute t ...
- new.target
[new.target] The new.target property lets you detect whether a function or constructor was called us ...
- 如何搭建python+selenium2+eclipse的环境
搭建python和selenium2的环境(windows) 1.下载并安装python(我用的是2.7的版本) 可以去python官网下载安装:http://www.python.org/getit ...
- python数据分析之matplotlib学习
本文作为学习过程中对matplotlib一些常用知识点的整理,方便查找. 类MATLAB API 最简单的入门是从类 MATLAB API 开始,它被设计成兼容 MATLAB 绘图函数. from p ...
- Linux基石【第三篇】vim提示-bash:vim :common not found解决方法
在Linux命令行输入vim时提示:-bash:vim :common not found,之后按着查询到的解决办法整好了: 解决步骤如下: 1.输入 rpm -qa|grep vim 命令,查看返回 ...
- Genymotion 模拟器上网出现 net::ERR_NAME_NOT_RESOLVED
Genymotion 模拟器在公司网络安装的,然后启动能正常上网,把笔记本带回家,网络变化了,再使用模拟器 上网显示: (net::ERR_NAME_NOT_RESOLVED) 各种百度,最后用如下方 ...
- Delphi: TMethod转普通方法为对象方法
回看旧时代码,以往清楚之记忆渐渐模糊,事隔多年,遗忘正在发生. TMethod方法,当初熟练再看已陌生,再做复习以作备忘. 简言之,它做为一相桥接,将普通事件或方法转换为类方法,其多用于事件动态设置中 ...
- polymorphism多态
[概念] 方法名相同,具体操作根据类不同. eg 有open()方法的ebook, kindle 都会被打开 eg 动物叫声不同 inheritance:只有superclass subclass都有 ...
- java 基础之--nio 网络编程
在传统的Java 网络编程中,对于客户端的每次连接,对于服务器来说,都要创建一个新的线程与客户端进行通讯,这种频繁的线程的创建,对于服务器来说,是一种巨大的损耗,在Java 1.4 引入Java ni ...
- Android沉浸式状态栏背景色以及字体颜色的修改
在activity中设置透明状态栏 的思路: 1.让activity的布局全屏 此时布局会和状态栏重叠 2.让布局最上方预留出和状态栏高度一样的高度,将状态栏的背景色设置为透明 效 ...