Question

我遇到一种情况，我想使用背景图像而不是图像标签。调整屏幕大小的图像在这里很重要...第一个示例是我想要的...图像调整大小，但是当高度降低到300px时停止。然后，如果屏幕尺寸真的很窄，则图像会居中，并且两端都会在这两种尺寸上裁切。使用object-fit:cover

可以轻松实现

第二个div使用背景图像并且几乎可以工作，但是当屏幕变窄时，我无法使图像居中。注意图像只是被裁剪为正确的尺寸。

.myimgtag {
width:100%;
height:auto;
min-height:300px;
object-fit:cover}



.mybackgroundimg {
background-image:url('https://www.panotools.org/dersch/StBp.JPG');
background-size:cover;
background-repeat:no-repeat;
min-height:300px;  
max-height: 2000px;
max-width: 2000px;
}
.mybackgroundimg:before {
content: "";
display: block;
padding-bottom: 50%;
}

<div>
<img class='myimgtag' src='https://www.panotools.org/dersch/StBp.JPG'>
</div>

<br><br>

<div class='mybackgroundimg'></div>

Answer 1

在第二张图片上，您是否尝试过background-position？

.myimgtag {
width:100%;
height:auto;
min-height:300px;
object-fit:cover}



.mybackgroundimg {
background-image:url('https://www.panotools.org/dersch/StBp.JPG');
background-position: center;
background-size:cover;
background-repeat:no-repeat;
min-height:300px;  
max-height: 2000px;
max-width: 2000px;
}
.mybackgroundimg:before {
content: "";
display: block;
padding-bottom: 50%;
}

<div>
<img class='myimgtag' src='https://www.panotools.org/dersch/StBp.JPG'>
</div>

<br><br>

<div class='mybackgroundimg'></div>

使用background-image：url与image标签进行图像居中

1 个答案: