css_使图片保持长宽比等比缩放
-
在开发中经常遇到需要图片按某个纵横比显示, 并且等比缩放; 比如现有以下需求: 一张header图片, 按照长宽比5:2进行显示并能进行等比缩放
-
思路: 当padding/margin 的值是百分比时, 是以父元素的宽度来进行计算的
<div id="container">
<div id="content">
<img src="./public/imgs/v2-f8054589c3454b0398b9e081182af89f_r.jpg" alt="">
</div>
</div>
#container {
width: 50vw;
height: auto;
position: relative;
border: 2px solid #000;
}
#content {
width: 100%;
height: 0;
padding-top: 120%;
position: relative;
overflow: hidden;
}
#content>img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}