Question

所以，我是一名初学者html / css编码器，并试图建立一个简单的网站。现在我有一个整洁的背景，表现完美。但是，当在顶部中心添加徽标时，它在当前窗口大小上看起来很完美。但是当我调整窗口大小时，徽标的一半被切掉了。

我的CSS风格：

.header-logo {
background: url(images/header-logo.png);
position: relative;
height: 200px;
margin-left:auto;
margin-right:auto;
background-size:cover;
width: 971px;
z-index: 2;
}

我想有一个自动缩放css / js设置，但我没有幸运地找到它。

感谢所有帮助！

路易斯

Answer 1

之所以发生这种情况是因为您的宽度被设置为固定在971px上，您应该使用width：100％并设置max-width或者至少使用@media来设置徽标宽度。

使用@media：

@media screen and (min-width: 480px) {
    .header-logo{
       width: 250px;
       background-position: center;
    }
}

Answer 2

您似乎想要一个971px宽的徽标，当屏幕尺寸小于该尺寸时，您会遇到问题，因为徽标会被切断。

您需要的是像这样的媒体查询，并将其放在您的css结尾

@media (max-width: 971px) {
    .header-logo {
        width: 100%;
    }
}

这样，任何971px以下的屏幕尺寸都会将width属性更改为屏幕尺寸的100％。

您不需要在媒体查询中重新声明该类的所有属性，它只会更改必须适应新屏幕大小的属性。

在此处详细了解媒体查询：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 3

问题是这两行代码：

height: 200px;

width:971px;

当你使用＆＃34; px＆＃34;它是固定数量的像素，这意味着它不会根据屏幕尺寸而改变。如果您使用＆＃34; em＆＃34;相反，图像将根据访客的屏幕大小而改变。

以下是我希望可能有用的两个快速参考资料。

http://www.w3schools.com/cssref/css_units.asp

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

要解决此问题，您可以执行以下操作：

height: 100em;

width:486em;

（当然不要使用我的确切值。）

编辑：或者，使用这样的百分比可能是好的：

width: 971px;
max-width:100%

编辑2：有人向我指出，你可能也想要包括这一行：

height:auto;

使用窗口大小缩放div

3 个答案: