博客
关于我
纯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模拟Oracle序列sequence
查看>>
Mysql模糊查询like效率,以及更高效的写法
查看>>
MySQL死锁套路:一次诡异的批量插入死锁问题分析
查看>>
Mysql死锁问题Deadlock found when trying to get lock;try restarting transaction
查看>>
mysql每个数据库的最大连接数_MySQL数据库最大连接数
查看>>
Mysql流程控制结构,if函数、case结构、if结构、循环结构
查看>>
mysql添加外网访问权限
查看>>
mysql添加用户
查看>>
MySQL添加用户、删除用户与授权
查看>>
mysql添加用户及权限
查看>>
Mysql添加用户并授予只能查询权限
查看>>
mysql添加用户权限报1064 - You have an error in your SQL syntax问题解决
查看>>
mysql添加索引
查看>>
mysql添加表注释、字段注释、查看与修改注释
查看>>
mysql清理undo线程_MySQL后台线程的清理工作
查看>>
mysql清空带外键的表
查看>>
MySQL清空表数据
查看>>
mysql源码安装
查看>>
Mysql源码安装过程中可能碰到的问题
查看>>