html - 响应式设计图像不会随着窗口大小的调整而缩放

Question

我正在努力将现有网站转换为 RWD，但一直在努力处理标题图片。按照本教程(以及 www 上的其他教程)http://alistapart.com/article/fluid-images

当缩放到 480 像素以下时，我无法让此(或任何)页面上的标题图片做出适当响应 http://www.your-adrenaline-fix.com/dirt-bikes-for-sale.html

我已经尝试了所有我能想到或读到的方法，但该死的图像无法正常显示。

如果有人不介意与我分享我所缺少的东西，我将不胜感激，我提前感谢你们每一个人。

下面是主 css 文件和整个 mobile.css 文件的片段，当页面缩放到 480 像素以下时，该文件将通过媒体查询调用

img {max-width:100%}

    #PageWrapper{ 
    width:960px;
    border:5px groove #DDDDDD;
    margin:15px auto;
    background-image:url(../image-files/background.gif);
    background-repeat:repeat-y;
    background-color:transparent;
}

#Header {
    color:#ffffff;
    position:relative;
    height:118px;
    background-image:url(../image-files/motocross-ruts.jpg);
    background-repeat:no-repeat;
    background-position:top left;   
}

#Header a.header-home-link{width:960px;height:118px;display:block;}

#ContentWrapper{float:left;width:100%;}

#ContentColumn{margin:0 180px;}

#NavColumn{float:left;width:179px;margin-left:-965px;}

#ExtraColumn{float:left;width:179px;margin-left:-180px;}

#Footer{clear:both;width:100%;padding:8px 0;height:180px;border-top:3px groove #656565;}

#Footer .Liner{margin:20px;padding:0;}

The following is the mobile.css file

    body {font-size:80%;}

.Liner{padding:2px;}

#PageWrapper{max-width:480px; margin:10px;}

#Header {min-height:39px;}

#Header a.header-home-link{display:none;}

#NavColumn{display:none;}

#ExtraColumn{display:none;}

#ContentWrapper{max-width:100%;background-image:url(../image-files/mobile320-background.gif);background-repeat:repeat-y;}

#ContentColumn{max-width:100%; margin:0;}

#ExtraNavTop {display:none;}

.Navigation{display:none;}

.mostPopular {display:none;}

我整天都在修改这两个文件，看到了太多不同的配置。只是不是我想要的那样，它是一张适当缩放的图像。这样我就可以继续处理与此 RWD 转换相关的待办事项列表。

斯图尔特·K

Answer 1

至少有两个地方的宽度是固定的

#Header a.header-home-link

和

#PageWrapper

宽度均为 960px 且未设置最大宽度 - 因此您的页面宽度永远不会小于 960px - 如果浏览器窗口更小，您只会在主体上看到一个水平滚动条。

此外，正如其他人指出的那样，您的标题图片不是 img 标签 - 它是背景图片 - 因此不会响应 img { max-width: 100%; }.您必须使用 background-size，您可以使用多个值，例如 cover、contain、百分比等。

在 MDN 上查找 - https://developer.mozilla.org/en-US/docs/Web/CSS/background-size - 尝试一下，看看哪一个适合您。