时间戳

首页 > 解决方案 > 当我减小屏幕尺寸时，如何均匀地修剪图像的左右两侧？（@媒体查询）

html - 当我减小屏幕尺寸时，如何均匀地修剪图像的左右两侧？（@媒体查询）

问题描述

当我减小屏幕尺寸时，我无法找到一种方法来修剪图像的左侧和右侧等量。我试图在我的 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 {
     ...
  }
}

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

标签： htmlcssresponsive-designresizescreen

解决方案

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

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

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

替换background.png为您的图像源

推荐阅读