Question

我有一张相对宽度的图像。目前src指向单个文件，非常大（让我们说1000px）。我的问题是，在使用Opera和IE的小型设备上，当浏览器缩放时，图像看起来很糟糕（你可以看到形成图像的像素）。

但如果我只提供一个小图像，在高清显示器上它会显得模糊。

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

对于我所见过的，目前建议的选项很少（question on SO），但现有的选项都不符合我的需求：

使用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 */

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

使用content: url()。此解决方案仅适用于webkit浏览器
设置多个图片，然后使用display:none。 SEO不好

上述所有内容都没有真正提供跨浏览器的解决方案来实现我喜欢的任何其他想法吗？

Answer 1

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

Answer 2

您似乎正在使用 bootstrap 将类.img-responsive添加到您的img，bootstrap将处理它

否则将此添加到您的img风格

display:block;
max-width:100%;
height:auto

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

2 个答案: