如何在减小屏幕尺寸时均匀地修剪图像的左右两侧?(@media查询)

Question

当我减小屏幕尺寸时，我找不到一种方法来修剪图像的左侧和右侧的等量。我正在尝试在我的 css 文件末尾添加一个@media查询来解决这个问题;但是，我不知道该在里面放什么。目前，我有一个 .main 容器，用于保存我的登录页面的背景图像。

body {
margin: 0px;
padding: 0px;
height: 770%;
background-color: #170D2F;
display: flex;
}
.main {
position: absolute;
width: 88%;
height: 800px;
cursor: auto;
background: url(background.png);
background-size: auto;
top: 0;
left: 6%;
overflow: hidden;
background-color: #170D2F;
}

我试图弄清楚在这里放什么，以便当我将屏幕尺寸减小到小于 1439px 时，我的图像均匀地调整大小......

@media (max-width: 1439px) {
.main {
...
}
}

我正在尝试弄清楚如何减小两侧的背景大小，因为目前当我减小页面大小时，它会切断我的一部分图像而不是减小它的大小。谢谢！

Answer 1

您可以在没有媒体查询的情况下实现这一点。

只需编辑类.main属性background如下所示：

background: url(background.png) center no-repeat;

将background.png替换为图像源