如何在所有设备和浏览器上显示具有适当尺寸的相同徽标图像？

Posted 2023-03-14

【中文标题】如何在所有设备和浏览器上显示具有适当尺寸的相同徽标图像？

【英文标题】：How to show the same logo image with proper dimensions on all devices and browsers?

【发布时间】：2014-11-03 13:48:47

【问题描述】：

我正在使用 Bootstrap 框架 2.0.1 设计一个网站。

但是我在我的网站上使用的图像徽标存在一个问题。徽标图像在 PC 和笔记本电脑上看起来不错，但当我在 iPhone 和 iPad 等设备上看到此徽标图像时，它会失去它的质量，图像徽标看起来模糊和拉伸。

所以我的问题是我应该如何克服这个问题？

我是否需要创建三个不同尺寸的相同徽标图像的不同副本，并将它们分别用于笔记本电脑/PC、iPhone 和 iPad？如果是怎么办？

如果有其他更好的解决方案，请告诉我。

提前致谢。

【问题讨论】：

查看您的代码会有所帮助，最好是minimal example。如果您使用width="" height="" 调整图像的实际大小，则可能会导致模糊。

【参考方案1】：

关于基于分辨率的不同图像副本的一个选项是srcset 属性。它根据用户显示器的像素密度指定图像的来源。

例如：

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w">

"在上面的简单示例中，我们所做的只是告诉浏览器一些我们可用的图像以及它们的大小。然后浏览器会执行所有工作来确定哪一个最好。 "

Read more here.

【讨论】：

+1 支持是有限的，但是当它最终被采用时真是太好了：caniuse.com/#feat=srcset

【参考方案2】：

您是否考虑过将图像转换为 SVG？ 因为它使用矢量而不是像素数据，所以无论它被拉伸/挤压多远都不会扭曲。 我相信它可以跨浏览器兼容回到 ie8

http://caniuse.com/#feat=svg

您可以免费下载inkscape（或使用illustrator，如果有的话）并尝试将图像转换为SVG来试用