Question

我在HTML中有这个，我需要将容器内的图片居中并进行缩放，即使我调整了父div的大小

<div class="art-cont" id="art">
<div class="art-1">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/2SQMYBPQGK.jpg">
</div>
<div class="art-2">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/2SQMYBPQGK.jpg">
</div>
<div class="art-3">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/2SQMYBPQGK.jpg">
</div>
</div>

CSS：

.art-cont{
    width:100%;
    height:400px;
}
.art-1{
    width:70%;
    height:50%;
    float:left;
    position:relative;
    overflow:hidden;
    border:2px solid #fff;
}
.art-2{
    width:30%;
    height:50%;
    float:left;
    position:relative;
    overflow:hidden;
    border:2px solid #fff;
}
.art-3{
    width:100%;
    height:50%;
    clear:both;
    position:relative;
    overflow:hidden;
    border:2px solid #fff;
}

这是一个小提琴：https://jsfiddle.net/0r7rhe77/

Answer 1

您可以通过将其添加到代码中来完成您的要求：

.art-1 img, .art-2 img, .art-3 img{
    max-width:100%;
    position:absolute;
    margin:auto;
    left:0;right:0;bottom:0;top:0;
}
.art-2 img{
    max-width:inherit;
    max-height:100%;
}

这是一个工作小提琴：https://jsfiddle.net/0r7rhe77/2/

Answer 2

以下规则将会这样做

.art-cont img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

只要您对the browser compatibility of object-fit感到满意（大约90％的用户 - 除IE 11或更低版本以外的大多数用户）。另请查看the other options for object-fit。

Fiddle

另一个选项是重构代码以使用background-image显示图片，因为所有现代浏览器都支持background-size。删除<img>元素，然后执行：

.art-1, .art-2, .art-3 {
    background-image: url(https://cdn.stocksnap.io/img-thumbs/960w/2SQMYBPQGK.jpg);
    background-size: cover;
    background-position: center center;
}

Fiddle using this approach

在此容器中的每个div中缩放和居中图像

2 个答案: