html - 如何在缩小屏幕尺寸时均匀地修剪图像的左右两侧？ (@媒体查询)

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;
}

我想弄清楚要放在这里的内容，以便在我将屏幕尺寸缩小到小于 1439 像素时图像均匀地调整大小 ...

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

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

Answer 1

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

只需编辑 .main 类中的 background 属性，如下所示:

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

将 background.png 替换为您的图像源