使用背景图像居中的图像：url 与图像标签

Question

我有一种情况想要使用背景图片而不是图片标签。根据屏幕大小调整图像大小在这里很重要...第一个示例是我想要的...图像调整大小但在高度下降到 300 像素时停止。然后，如果屏幕尺寸变得非常窄，图像将保持居中，并且两个尺寸的两端都会被裁剪。这可以通过 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>

使用背景图像居中的图像：url 与图像标签

Image Centering with background-image:url vs. image tag

html

css

background-image

centering