博客
关于我
纯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/

你可能感兴趣的文章
MySQL5.7.19-win64安装启动
查看>>
mysql5.7性能调优my.ini
查看>>
Mysql5.7深入学习 1.MySQL 5.7 中的新增功能
查看>>
Mysql5.7版本单机版my.cnf配置文件
查看>>
mysql5.7的安装和Navicat的安装
查看>>
mysql5.7示例数据库_Linux MySQL5.7多实例数据库配置
查看>>
MySQL8.0.29启动报错Different lower_case_table_names settings for server (‘0‘) and data dictionary (‘1‘)
查看>>
MySQL8修改密码报错ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
查看>>
MySQL8找不到my.ini配置文件以及报sql_mode=only_full_group_by解决方案
查看>>
mysql8的安装与卸载
查看>>
mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
查看>>
mysqldump 导出中文乱码
查看>>
mysqldump备份时忽略某些表
查看>>
mysqldump实现数据备份及灾难恢复
查看>>
mysqlreport分析工具详解
查看>>
MySQL一个表A中多个字段关联了表B的ID,如何关联查询?
查看>>
MYSQL一直显示正在启动
查看>>
MySQL一站到底!华为首发MySQL进阶宝典,基础+优化+源码+架构+实战五飞
查看>>
MySQL万字总结!超详细!
查看>>
Mysql下载以及安装(新手入门,超详细)
查看>>