html - xs sm md lg 显示器的不同图像分辨率

Question

我有一个相对宽度的图像。目前 src 指向一个文件，非常大(比如 1000px)。我的问题是，在带有 Opera 和 IE 的小型设备上，当浏览器缩放图像时，图像看起来很糟糕(您可以看到形成图像的像素)。

但如果我只提供一张小图片，在高清显示器上它看起来会很模糊。

因此我想为每个屏幕提供不同的图像分辨率。

就我所见，目前建议的选项很少 ( question on SO )，但现有的选项中没有一个真正适合我的需要:

1. 使用 background 属性(然后为不同的屏幕分辨率使用 @media):

   display: block;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   background: url(http://domain2.com/newbanner.png) no-repeat;
   width: 180px; /* Width of new image */
   height: 236px; /* Height of new image */
   padding-left: 180px; /* Equal to width of new image */
   

   我不喜欢这个解决方案，因为相对宽度无法正常工作。

2. 使用content: url()。此解决方案仅适用于 webkit 浏览器

3. 设置多张图片，然后使用display:none。不利于 SEO

以上都没有真正提供一个跨浏览器的解决方案来做我想要的，还有其他想法吗？

Answer 1

我认为您列出的所有解决方案都很糟糕。背景图像和内容图像之间存在很大差异，如果您设置多个图像，然后只使用 display:none，您的所有图像甚至都会被加载。在我看来，要做到这一点并具有较大兼容性的唯一方法是 JavaScript 解决方案。您必须根据当前浏览器的尺寸动态更改 src 属性。您可以使用 window.matchMedia 或直接(最兼容)window.screen。HTML5 中有一个新属性 srcset 但 as you can see它仍然没有得到很好的支持。