Question

我只是试图向客户端展示一个带有全宽主图像的COMP（这只是一个comp而不是一个网站），但我希望它能够正确调整大小。主要区域是1124px。我制作了1500像素的主图像，我把它放在100％的屏幕上。问题是，当我调整小于1500像素的屏幕时，它不会居中。我希望左侧开始切断部分图像并保持图像居中。如果你查看链接http://www.gregquinn.com/weg/webdesign9.html并开始缩小屏幕（我希望建筑物和标语保持在中心位置），这会更容易。）必须有一个简单的方法来执行溢出：隐藏或其他东西。

Answer 1

嘿，现在定义这个css

    body {
    min-width: 1124px;
    }
.home-banner{
  background-repeat:center center;
}

Answer 2

尝试使用以下CSS - background-size：cover;。如果屏幕比率与图片比率不同，它将在从边缘剪切的同时保留适当的比例。它将随浏览器窗口缩放。尝试各种背景位置，例如左上角，以达到您想要的效果。

background-image:url(path-to-your-image);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;

您可以使用下面的代码设置网站宽度，或让网站显示浏览器窗口的100％宽度和高度。实验，看看哪些功能最好。

html{
margin:0;
padding:0;
border:none;
height:100%;
width:100%;
}

body {
margin:0;
padding:0;
height:100%;
width:100%;
border:none;
background-color:#2D2D2D; /*choose a background color similar to your image*/
}

Answer 3

只需将background-position:center;添加到.home-banner。

调整主图像的大小

3 个答案: