如何让一个div
容器
中的图片自适应宽度,不留白边,并与div
容器
等宽?
解答:可以使用CSS中的object-fit属性来实现。将CSS样式设置为:
position:relative;
width: 500px; /* 假设div容器宽度为500px */
height: 300px; /* 假设div容器高度为300px */
overflow:hidden; /* 隐藏溢出部分 */
div img{
position: absolute;
height: auto;
width: 100%;
top: 0;
left: 0;
object-fit: cover; /* 使用cover属性,将图片等比例缩放,保持宽高比,直至完全覆盖整个容器 */