我想制作具有恒定宽度和高度的 div，其中包含尺寸未知的子图像。
像这样的东西：
我最接近的是max-height: inherit; max-width: inherit但它改变了纵横比
.parent {
border: 1px solid ;
width: 40vh;
height: 40vh;
overflow: hidden;
display: flex;
}
img {
max-width: inherit;
max-height: inherit;
height: inherit;
width: inherit;
}
<div class="parent">
<img src="https://images.pexels.com/photos/1123982/pexels-photo-1123982.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" />
</div>
我怎样才能做到这一点？
你需要使用object-fit:coverCSS 属性为img or video应调整大小以适合其容器。
运行下面的代码片段。
.parent {
border: 1px solid;
width: 20vh;
height: 20vh;
overflow: hidden;
display: flex;
}
img {
max-width: inherit;
max-height: inherit;
height: inherit;
width: inherit;
object-fit: cover;
}
<div class="parent">
<img src="https://images.pexels.com/photos/1123982/pexels-photo-1123982.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" />
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
