2

为一个糟糕的标题道歉。我一直在自学响应式设计技术，我阅读的所有博客似乎都在谈论为移动平台下载桌面大小的图像、加载多个图像或需要 javascript 时存在问题。 我写了一个小小提琴，它使用媒体查询和填充顶部纵横比技巧进行动态调整大小。它工作正常，并在启动时加载正确的图像（至少此时在 Chrome 中），并且正确地上下移动（你必须打开网络监视器才能看到）。

我很高兴它有效，但是我担心在我的页面上使用它——这会对我使用谷歌蜘蛛产生任何严重影响（因为它们是背景图像而不是图像）。有什么我在这里明显遗漏的警告吗？

代码很简单：

HTML：

<!-- padding top equal to aspect ratio -->
<div style="padding-top:75%;width:100%;" id="image"></div>

CSS：

html, body { margin: 0; padding: 0; }

#image {
  background-repeat: no-repeat;
  background-size:   100%;
  border: 1px solid #000;
}

@media screen and (max-width: 320px) { 
    body { width: 240px; margin: 0 auto; }
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec_n.jpg');
}}
@media screen and (max-width: 500px) {
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec.jpg');
}}
@media screen and (max-width: 640px) {
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec_z.jpg');
}}
@media screen and (min-width: 641px) {
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec_b.jpg');
}}
4

2 回答 2

4

将背景图像用于实际内容图像在语义上是不正确的。但是，响应式地设置背景图像的样式会更容易。这完全取决于您正在处理的情况。

于 2013-01-10T04:49:19.287 回答
2

小心使用背景图像作为您的内容照片。如果这些图像对内容至关重要，那么如果关闭 CSS（例如 RSS 阅读器），它们将不会被看到，并且屏幕阅读器的可用性也不会很好，因为它们没有替代文本。如果您想被搜索，也不要忘记 SEO 的替代文本。

但是，如果您的图像不是必需的并且仅仅是装饰，那么据我所知，使用背景图像没有问题。

于 2013-01-10T05:11:34.193 回答