博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
纯css实现容器高度随宽度等比例变化的四种解决方案
阅读量:6476 次
发布时间:2019-06-23

本文共 1077 字,大约阅读时间需要 3 分钟。

使用一个隐藏的图片来实现

这个方法是我最推荐的,因为不需要考虑任何兼容性,PC移动完美运行。除了增加了一个dom结构,但是相对与一个页面成百上千的代码来说,不值一提

我们知道,div容器如果不给定高度,它的高度会随着容器内部的元素变化而撑大,这个时候,我们在容器内部添加一张符合我们宽高比例的图片,给图片设置宽度100%;高度auto。不管我们的父容器如何变化,内部的img宽度都是100%,图片是会严格按照比例i自动缩放的,相应的,我们内部的子容器的盖度也就会按照比例缩放了

图片描述

#container {    width: 100%;  }  .attr {    background-color: #008b57;  }  .attr img{    width: 100%;    height: auto;  }  

如果你觉得增加img标签多发了http请求,那么请继续往下看,神器base64图片编码帮你解决这个问题,由于我们的的图片只需要一个人形状而已,所以可以大胆的压缩,然后编码,连http请求都省了,嘎嘎~

使用vmin

这个单位也是css3的新单位(css3大法好~),我们将父容器的宽度和高度定义为相同的vmin,这样父容器的高度和宽度就是相同值,这个时候,子容器的宽高值设为百分比,不管父容器大小如何变,子容器的高度和宽度比都是不会变的。

单位 说明

vw 相对于视窗的宽度
vh 相对于视窗的高度
vmin 相对于视口的宽度或高度中较小的那个被均分为100单位的vmin
vmax 相对于视口的宽度或高度中较大的那个被均分为100单位的vmax

#container{  width: 100vmin;  height: 100vmin;  }.attr {  width: 50%;  height: 50%;  background-color: orange;}

使用cale

cale()是css3的心特性,它的值可以是一个表达式,这里我们关心的是。calc中的百分比也是按照父容器的百分比垃圾算的

.attr{  width:50%;  height: calc(50%);}

padding-bottom实现

这里方法非常巧妙,由于padding-bottom的属性值百分比是按照父容器的宽度来计算的,所以这里我们设置容器宽度为父容器的50%;padding-bottom也为50%;就都是父容器宽度的50%;显示出来就是一个完美的正方形了

图片描述

看个代码:

转载地址:http://momko.baihongyu.com/

你可能感兴趣的文章
PIG之 Hadoop 2.7.4 + pig-0.17.0 安装
查看>>
想看《笑傲江湖》的请戳进来
查看>>
ADO.NET 连接池理解
查看>>
JavaScript for in的缺陷
查看>>
Win7下BootCamp蓝屏问题解决方案二
查看>>
C#代码备份还原MSSQL数据库
查看>>
方法中的内部类能不能访问方法中的局部变量,为什么?
查看>>
JMeter安装
查看>>
微信小程序开发
查看>>
自定义UEditor右键菜单
查看>>
mysql数据库连接的测试代码语句片断
查看>>
flash 绑定 swc类文件
查看>>
51nod 1172 Partial Sums V2 任意模FFT
查看>>
Linux下的DIR,dirent,stat等结构体详解
查看>>
第 1 章 虚拟化 - 008 - LVM 类型的 Storage Pool
查看>>
kettle-Excel输入
查看>>
380. Insert Delete GetRandom O(1)
查看>>
Linux下的tar压缩解压缩命令详解
查看>>
vue 2.0 打包的时候去除掉 .map 文件
查看>>
转:jQuery对象与dom对象的联系、区别和转换
查看>>