Question

我有一个背景图片，我可以用img标签或背景图片设置。我希望图像始终在浏览器中居中。然后在调整浏览器大小时，我希望图像保持完整大小，并开始隐藏左右两侧的溢出。溢出应该在图像的两侧被剪裁，因此图像的中心始终位于中心。

Answer 1

尝试这样的事情，可能需要稍微改变，具体取决于你的页面布局。

.parentElement {
    position: relative;
    float: left;
    width: 500px;
    height: 200px;
    overflow: hidden;
}

.parentElement img {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    max-width: 200%;
    max-height: 200%;
    top: -999px;
    right: -999px;
    bottom: -999px;
    left: -999px;
    margin: auto !important;
    width: initial;
}

https://jsfiddle.net/409u4zop/4/

如果您想使用背景图像，请执行

background-position: center;

Answer 2

添加背景大小和位置

background-size: cover;
background-position: center;

background-size：cover

将背景图像缩放到尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域中的视野中

保持图像居中而不调整大小，剪辑左右溢出

2 个答案: