博客
关于我
纯css实现容器高度随宽度等比例变化的两种解决方案
阅读量:321 次
发布时间:2019-03-04

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

1、padding-bottom实现

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

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

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

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

相比较而言,设置后,这里父容器的高度会比图片的高度多出来一点点,所以在使用上会存在一定的误差。

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

你可能感兴趣的文章
mysql函数汇总之字符串函数
查看>>
mysql函数汇总之数学函数
查看>>
mysql函数汇总之日期和时间函数
查看>>
mysql函数汇总之条件判断函数
查看>>
mysql函数汇总之系统信息函数
查看>>
MySQL函数简介
查看>>
mysql函数遍历json数组
查看>>
MySQL函数(转发)
查看>>
mysql分区表
查看>>
MySQL分层架构与运行机制详解
查看>>
mysql分库分表中间件简书_MySQL分库分表
查看>>
MySQL分库分表会带来哪些问题?分库分表问题
查看>>
MySQL分组函数
查看>>
MySQL分组查询
查看>>
Mysql分表后同结构不同名称表之间复制数据以及Update语句只更新日期加减不更改时间
查看>>
mySql分页Iimit优化
查看>>
MySQL分页查询
查看>>
WebDriverException:未知错误:对于旧版本的 Google Chrome,在 Python 中找不到带有 Selenium 的 Chrome 二进制错误
查看>>
mysql列转行函数是什么
查看>>