Question

我正在努力将现有网站转换为RWD，但一直在努力使用标题图片。遵循本教程（以及其他在www上）http://alistapart.com/article/fluid-images

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

我已经尝试了所有我能想到或阅读的内容，但是这些图像无法正常显示。

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

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

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转换相关的增加的待办事项列表。

Stuart 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 - 然后尝试找出哪一个适合您。

Answer 2

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

#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;
}

响应式设计图像不会随着窗口大小而缩放

2 个答案: