如何更改仅使用 CSS 和媒体查询动态生成的图像的 url？答案

【问题标题】：How to change url of image which is generated dynamically just by using CSS and media queries?如何更改仅使用 CSS 和媒体查询动态生成的图像的 url？
【发布时间】：2012-01-30 00:30:28
【问题描述】：

如果我提出不可能回答的问题，我提前道歉。但我只是觉得值得一问，也许有人知道如何实现我的要求。

我在页面上有这样的图像（图像 url 是由 PHP 在服务器上动态生成的）：

<img src="/images_BIG/image_12345.jpg" />

现在 - 我想只使用 CSS 媒体查询来更改此图像 URL，让我们这样说（当浏览器视口宽度小于例如 800px 时）：

<img src="/images_SMALL/image_12345.jpg" />

我知道这可以通过 PHP（检测移动浏览器并返回适当的 URL）或使用 Javascript 即时更改 URL 来完成。但这对 CSS3 可行吗？我只针对 HTML5 浏览器，所以不需要关心 IE。

提前感谢您的任何想法和帮助。

【问题讨论】：

为什么 JavaScript 不是解决方案？
@Blowski 可能是这样，但是它会大大减慢渲染页面的速度 - 特别是在移动连接时（等待页面触发 document.ready() 然后下载丢失的图像）
看看这个很酷的视频：ontwik.com/html5-2/html5-and-css3-media-queries。但正如我在下面阅读了您的评论，它并没有显示您想要的内容。

标签： html css media-queries

【解决方案1】：

将图像包装在一个 div 中。首先使用移动设备，以便它只在小屏幕上下载图像的小版本。在更大的屏幕上，图像会被隐藏，而会出现背景图像。

两个缺点 - 一个非语义包装的 div，以及需要指定 div 的高度和宽度。好处是您可以在 HTML 中获得前景图像。

HTML

<div class="imgContainer"><img src="/images_SMALL/image_12345.jpg" /></div>

CSS

// for screens bigger than 800px
@media screen and (min-device-width:800px) {
  div.imgContainer {
    background-image:url(../images_BIG/image_12345.jpg);
    background-size:100px;
    width:100px;
    height:100px;
  }
  img {
    display:none;
  }
}

编辑根据您上面的评论，我会说添加包装 div 并使用 jQuery 设置其背景图像。

【讨论】：

这可行，但是请阅读我上面的 cmets - 我不能在 CSS 样式表中使用图像 url，因为它是在服务器上动态生成的。
@Frodik 移动优先代码 - 小图像、CSS 和 JavaScript。然后在 PC 上覆盖它。这取决于您的确切用例 - 如果有很多（可能超过 100 个）中等大小的图像，这会更慢。不过，如果只是几张中大尺寸的图片，那就没问题了。

【解决方案2】：

您可以根据您的媒体查询设置不同的 css 文件：

#image1 { background: url('/images_BIG/image_12345.jpg'); width: 600px; height: 200px; }
@media screen and (max-device-width: 480px) {
 #image1 { background: url('/images_SMALL/image_12345.jpg'); width: 300px; height: 100px; }
}

在这种情况下，您需要从一个 IMG 标记移到另一个标记 (<span id="image1"></span>)。

【讨论】：

我知道这一点，但正如我在问题中所说的那样——图像 URL 是在服务器上动态生成的，所以我不能在 CSS 样式表中使用它的 URL，因为我实际上不知道它。

【解决方案3】：

好吧，正如我已阅读您的评论...如果唯一的问题是将变量 url 包含到 css 样式表中...那么仅 php 包含（呈现）样式表（用<style> 标签包装）到结果中html?然后你可以在 url 的位置使用<?php echo $imageUrl ?>。我以前从未这样做过，这可能是一个愚蠢的想法，但现在对我来说似乎是可能的。

【讨论】：