Question

我想知道如何在@media屏幕和max-width：640中调整图像大小。我的style.css：

#header-wrapper
    {
        position: relative;
        padding: 7em 0 0;
        background:url(images/fox-illustration.jpg) no-repeat center;
        background-position:center;
        width:auto;
        height:768px;

    }

我的mobile.css：

@media screen and (max-width: 640px) {

  header-wrapper {
    width: 600px;
    }

所以宽度仅适用于header-wrapper .. 我还尝试在mobile.css中为header-wrap提供另一个图像（我在photoshop中调整尺寸为移动尺寸）。

但这也不起作用。我认为因为header-wrapper的图像会在style.css中覆盖它？

Answer 1

background:url(images/fox-illustration.jpg);
background-size:600px 400px;
background-repeat:no-repeat;

这样做

Answer 2

首先确保您的mobile.css处于活动状态。

如果您的代码的第二部分现在已经设置，那么您可能在css中缺少一个id标记。

尝试更改

header-wrapper {
    width: 600px;
}

到

#header-wrapper {
    width: 600px;
}

Answer 3

除了使用固定的背景大小，您可以使用封面并遵循＃header-wrapper

的宽度

#header-wrapper {
  position: relative;
  padding: 7em 0 0;
  background:url(images/fox-illustration.jpg) no-repeat center;
  background-size:cover;
  width:auto;
  height:768px;
}


@media screen and (max-width: 640px) {

  #header-wrapper {
    width: 600px;
  }
}

如何在@media屏幕属性中调整图像大小？

3 个答案: