需求
在一个产品列表中，有若干个item，每个item都左浮，并包含在自适应浏览器宽度的父元素中。在保持item宽高比例固定的情况下，使item元素可以和父元素同比缩放。
方法
.item{
float: left;
width: 20%;
height: 0;
padding-bottom: 40%;
}
上面代码实现了item元素宽高比例固定为1 : 2，并且与其父元素同比缩放。
height值是百分比，这个百分比值是相对其父元素的宽度而言的，即使对padding-bottom和padding-top也是如此；overflow时，元素内容区域（width和height对应区域）和padding区域一起计算，即使overflow: hidden;，padding区域也会显示；padding-bottom代替height，将height的值设为0，使元素的高度等于padding-bottom的值。需求在一个产品列表中，有若干个item，每个item都左浮，并包含在自适应浏览器宽度的父元素中。在保持item宽高...
CSS div不定宽高，如何实现宽高比例1:1 div不定宽高，实现垂直居中 div不知道宽高且display:n...
点亮星星 文本打点-单行 用户体验&实现 文字垂直居中 CSS-宽高定比例展示 【IE】CSS版本兼容&JS检测 ...
多种css垂直居中的方法 ==css3不定宽高水平垂直居中== 1：固定高宽的垂直居中 如上图，固定高宽的很简单，...
1、CSS （1）#root 是 .box 的父元素，两者宽高都不固定。用CSS实现.box相对于#root水平和...
背景提要 今天写一个简单的自定义控件，实现宽固定，高度根据自定义宽高比例自动调整；或高固定，宽度随比例调整。其中有...
固定——宽高 不固定——宽高
元素宽度不定 ==> 实现水平居中 元素宽高固定 ==> 实现绝对居中
父元素没有固定宽高 水平垂直居中 html: css: 水平居中 不确定子元素宽高 设置水平居中，先将子元素转化为...
工作的过程中，排版经常会遇到为了整洁，需要把图片整理成一样的宽高，通常的做法是设置固定宽高。目前固定图片比例一般为...
本文标题：CSS实现固定比例宽高
本文链接：https://www.haomeiwen.com/subject/whmarftx.html
网友评论