博客
关于我
纯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基础系列—SQL分类之一
查看>>
MySQL处理千万级数据分页查询的优化方案
查看>>
mysql备份
查看>>
mysql备份与恢复
查看>>
mysql备份工具xtrabackup
查看>>
mysql备份恢复出错_尝试备份/恢复mysql数据库时出错
查看>>
mysql复制内容到一张新表
查看>>
mysql复制表结构和数据
查看>>
mysql复杂查询,优质题目
查看>>
MySQL外键约束
查看>>
MySQL多表关联on和where速度对比实测谁更快
查看>>
MySQL多表左右连接查询
查看>>
mysql大批量删除(修改)The total number of locks exceeds the lock table size 错误的解决办法
查看>>
mysql如何做到存在就更新不存就插入_MySQL 索引及优化实战(二)
查看>>
mysql如何删除数据表,被关联的数据表如何删除呢
查看>>
MySQL如何实现ACID ?
查看>>
mysql如何记录数据库响应时间
查看>>
MySQL子查询
查看>>