0

我正在努力将现有网站转换为 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

4

2 回答 2

2

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

#Header a.header-home-link

和

#PageWrapper

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

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

在 MDN 上查找它们 - https://developer.mozilla.org/en-US/docs/Web/CSS/background-size - 并尝试它们以找出适合您的。

于 2013-09-20T22:19:41.097 回答
0

看看你的 CSS #Header，你的标题图片是背景！！！您的标题块不包含任何<img>，没有可扩展的内容。尝试background-size使用 CSS3 规则，或者将其插入到带有<img>. 来自您网站http://www.your-adrenaline-fix.com/dirt-bikes-for-sale.html的 CSS ：

#Header {
    // Here it is!!!
    background-image: url("../image-files/motocross-ruts.jpg");
    background-position: left top;
    background-repeat: no-repeat;
    color: #FFFFFF;
    height: 118px;
    position: relative;
}
于 2013-09-20T22:08:56.277 回答