2

我有点确定这是不可能的，但我问是因为这似乎令人难以置信。

我有一些用于响应式设计的元素

img {max-width:100%;height:auto;}

但图像必须因设备而异（我不会在手机设备上加载宽屏图像）。

由于不支持内联媒体查询，我可以使用 css 背景解决方案，但 background-size 没有得到完全支持，老实说，它看起来更像是一个 hack。

任何人都可以确认“广泛支持的与设备相关的响应图像”是不可能的吗？

谢谢

4

4 回答 4

3

如果我正确理解您的问题，您正在寻找一种根据视点提供不同图像的方法。

自适应图像可能是您正在寻找的解决方案。很容易设置和确认。

第二种可能会给您更多控制权的是Adapt.js。我已经在几个网站上成功地使用了它。您在文档的头部加载了一个小的 javascript 文件。这会测试视点宽度，然后根据结果，它将发送适当的 CSS 文件。它比@media 请求具有更广泛的浏览器支持。

如果您可以使用背景图像，那么它会很好地工作，并且由于您可以为不同的视点指定不同的图像，因此您不会使用不了解背景图像大小的浏览器。

祝你好运！

于 2013-04-21T20:39:49.983 回答
0

我没有确认任何事情。jquery/javascript 什么都不是。

但事实是，响应式设计有其自身的缺点。换句话说，定义响应式设计是在具有大浏览器分辨率的设备中显示所有内容，并使用 dsiplay:none 以较低的分辨率隐藏某些CSS内容。问题是 display:none 不会阻止元素的加载。简而言之，也许没有 CSS解决方案。而且由于响应式设计是关于 CSS 的............

于 2013-04-20T17:38:06.917 回答
0

2014 年更新

这里有一个很好的新技术：http: //filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

它需要一个小 js、一个 1x1px 的空白图片、一些额外的 img 标签标记和一些 .htaccess 规则。

到目前为止似乎工作正常。

于 2014-02-19T16:31:24.257 回答
0

你可以试试Responsive Img jQuery plugin。

它可以根据容器的宽度在不同的断点处自动创建和交换不同大小的图像。

如果您在创建的图像和服务器上已经有不同的版本，该插件只会在正确的断点大小处交换这些版本。

因此，您可以为所需的所有不同断点大小创建新图像，其余的由插件处理。

它不是 CSS，但它完成了工作。

于 2013-04-22T14:06:07.390 回答