图片自适应容器显示
业务场景
已知容器的宽高,图片的宽高未知,需要在保持图片比例的情况下自适应显示在容器内
预期效果
红色方框是容器,里面是图片元素
实现过程
第一种:通过 css 属性 object-fit: contain
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框, 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
<style>
.box {
width: 400px;
height: 300px;
margin: 200px auto;
border: 1px solid red;
}
.img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
<div class="box">
<img src="./111.jpg" class="img" alt="" />
</div