CSS实现宽高等比自适应容器菜鸟指南_自适应入门教程

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

CSS实现宽高等比自适应容器菜鸟指南

在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半。

CSS实现宽高等比自适应容器菜鸟指南_自适应入门教程

于是我们就需要实现一个宽度自适应,高度为宽度一半的容器。

这里先以高度为宽度一半为例,也可以是其他任意比例

一、思考如何实现

这个问题类似于:我们在移动端页面,上面有一张宽度 100% 的图片,如果我们没设置高度,则图片会根据原有尺寸,等比缩放。

我们可以借助这个想法,根据元素高度,来为元素设置一个相应比例的高度即可。

二、实现方法1 – 通过 vw 视口单位实现

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

我们就可以利用这个特性,实现移动端的宽高等比自适应容器。

HTML代码:

<div class="box">
    <img src="http://images.pingan8787.com/2019_07_12guild_page.png" />
</div>

CSS代码:

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

为什么 .box 高度为 51.5vw 呢?

原因是图片原来的尺寸是 884 * 455的宽高比例,即 455 / 884 = 51.5%。

这个方法相比原来图片的等比缩放,有个优点:无论图片是否加载成功,容器高度始终是计算完成,不会造成页面抖动,也不会造成页面重绘,从而提升性能。

下面看看这种情况下,图片加载成功和失败的对比:

CSS实现宽高等比自适应容器菜鸟指南_自适应入门教程

三、实现方法2 – 通过子元素 padding 实现

通过设置子元素的 padding 属性来实现,是比较常用,也是效果比较好的一种,这里需要理解的是:子元素的 padding 属性百分比的值是先对父容器的宽度而言。

这里看下面代码和效果图理解下:

HTML代码:

<div class="box">
    <div class="text">我是王平安,pingan8787</div>
</div>

CSS代码:

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

CSS实现宽高等比自适应容器菜鸟指南_自适应入门教程

分析:

这里我们将父容器 .box 宽度设置为 200px,子元素 .text 的 padding:10% ,因此 .box 的 padding 计算结果为 20px;

接下来结合主题,我们利用这个原理,来实现等比例的问题:

HTML代码:

<div class="box">
    <div class="text">
        <img src="http://images.pingan8787.com/2019_07_12guild_page.png" />
    </div>
</div>

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;。

海计划公众号
(0)
上一篇 2020/03/26 23:31
下一篇 2020/03/26 23:31

您可能感兴趣的内容

  • Nebular指南教程_一个基于Angular的全功能框架

    Nebular指南教程 官方网址:https://akveo.github.io/nebular GitHub:https://github.com/akveo/nebular 简…

    2020/03/11
  • Taro开发多端应用新手入门_Taro小白常识

    官方解释: 使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动小程序、H5、React-Native 等)运行的代码。
    使用前
    第一次看到Taro是在github搜索React插件时看到(个人习惯,有时候会去搜索一个语言的插件在GitHub再按照Star排名,看看各个插件功能,

    2020/03/30
  • 程序员沉迷 Bug 可以有多疯?小白基础_bug小白教程

    苍天啊!大地啊!竟然有程序员,因为沉迷代码,快要痛失女友了!那么,程序员写起代码,究竟可以有多沉(shang)迷(yin)?如果你在下班路上,看到有个穿条纹羽绒服的小哥,突然掏出电脑,迅速连上手机热点,并开始蹲在地上噼里啪啦敲键盘,十有八九就是在改Bug!而有一次,晚上八九点了,我在望京某地铁站的厕所里,竟然看到一名女程序员,把电脑放在洗手池上,改-B-u-

    2020/04/03
  • FFmpeg常用命令合集入门基础知识_命令使用攻略

    ffmpeg查询命令命令注释-version显示版本号-demuxers显示可用的demuxers-muxers显示可用的muxers-devices显示可用的设备-codecs显示所有编解码器-decoders显示可用的解码器-encoders显示可用的编码器-bsfs显示比特流filter-formats显示可用的格式-protocols显示可用的协议f

    2020/03/30
  • 程序员表白被拒后,听过最狠的话小白攻略_程序员使用攻略

    喜欢一个人,到了极限。就想跟她表白,但表白成功率并不是百分之百。所以被拒绝也事常有的事,下面看看程序员表白被拒后,听过最狠的话…. 1、不行诶……我电脑坏了还能找你吧?2 、我怕失去一个好朋友。3、你长得丑,配不上我!4、你想和一个不喜欢你的人在一起吗5、你太矮了6、啊?我一直把你当好哥们啊7、我对你的喜欢只是朋友的喜欢8、你性格挺好的,但不是我喜欢的那

    2020/04/03
  • JS设置CSS样式的几种方式攻略教程_样式小白攻略

    用JS来动态设置CSS样式,常见的有以下几种1. 直接设置style的属性 某些情况用这个设置 !important值无效如果属性有’-‘号,就写成驼峰的形式(如textAlign) 如果想保留 – 号,就中括号的形式 element.style[‘text-align’] = ‘100px’;element.style.height = ‘100px

    2020/03/20
  • 能用CSS能播放声音吗?基础入门_音频入门基础教程

    CSS 是样式、布局和表示的领域。它充斥着颜色、大小和动画。但是你知道吗,它还可以在网页上控制播放声音。本文介绍了一些技巧。实际上它并不是真正的 hack,而是针对 HTML 和 CSS 的严格实现。不过说实话,这仍然是一种 hack。我不建议在生产中使用它,因为音频可能还会被 元素或 JavaScript 进行控制。窍门用 CSS 播放声音

    2020/03/22
  • input accept属性限制文件上传格式使用说明_上传攻略教程

    上传文件的类型;具体做法如下所示:注意:accept属性可以限制上传格式,其有兼容性如下《1》上传.csv格式的《2》上传.xls格式《3》上传.xslx格式<input text

    2020/03/30
  • seo优化:怎样才能把网站关键词排名做上来?基础入门_seo菜鸟知识

    如何把网站关键词seo排名做上去呢?表示很多人不断探求SEO排名方法、百度排名规则。在互联网上寻找各种各样秘籍宝典,当你耗费大量的时间做这些无用工时,我需要提醒你,你忽略了做关键词seo排名成功的本质:执行力。众所周知,关键词seo排名周期长工作量大,你需要不断建设网站的内容、发外链,没有内容和外链的支撑,你的SEO工作将会非常艰难。一、首先看内容建设内容建

    2020/03/23
  • 前端开发工程师必须关注的几个性能指标基础教程_性能入门知识

    于页面相应时间,有一条著名的“2-5-8原则”。当用户访问一个页面:在2秒内得到响应时,会感觉系统响应很快;在2-5秒之间得到响应时,会感觉系统的响应速度还可以;在5-8秒以内得到响应时,会感觉系统的响应速度很慢,但可以接受;而超过8秒后仍然无法得到响应时,用户会感觉系统糟透了,进而选择离开这个站点,或者发起第二次请求。对于一个网站如果希望抓住用户,网站的速

    2020/03/30
  • Rickshaw小白基础一个用于绘制时序图的简单 jS 库

    Rickshaw基础入门 官方网址:https://shutterstock.github.io/rickshaw GitHub:https://github.com/shutte…

    2020/03/05
  • ng2-toasty入门教程_一个angular的消息提示组件

    ng2-toasty入门教程 GitHub:https://github.com/akserg/ng2-toasty 简介描述:一个angular的消息提示组件 这是一个angul…

    2020/03/11
  • Gumby小白常识_基于Sass创建的响应式CSS框架

    Gumby小白常识 官方网址:https://gumbyframework.com/ GitHub:https://github.com/GumbyFramework/Gumby …

    2020/03/06
  • cocoscreator 防止button连击多次触发事件入门攻略_事件使用帮助

    很多时候,ui上面的button都只需要单击触发一次,当用户快速连续点击时就有可能出现非意料的事情,解决这个问题很简单,只要规定button在指定间隔时间内只能触发一次就行。将下面的代码保存为ButtonSafe.js, 只需要给每个button控件添加下面的脚本并指定间隔时间即可防止重复点击。/*** Created by skyxu on 2018/9/

    2020/03/23
  • SpriteCow基础知识入门_在线图片CSS生成工具

    SpriteCow基础知识入门 官方网址:http://www.spritecow.com/ 简介描述:在线图片CSS生成工具 精灵牛(Sprite Cow)是一款非常强大的Css…

    2020/03/11
  • chartify.io入门基础_在线免费统计图表制作工具

    chartify.io入门基础 官方网址:https://chartify.io/ 简介描述:在线免费统计图表制作工具 chartify.io是一款让使用者可轻松建立统计图表的免费…

    2020/03/10