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

Question

我想知道如何在@media screen 和 max-width:640 中调整图像的大小。我的样式.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 包装器..我还尝试给 mobile.css 中的 header-wrapper 另一个图像(我在 photoshop 中将其调整为手机大小)。

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

Answer 1

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

这样做