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

我正在使用Bootstrap framework 2.0.1设计一个网站

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

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

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

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

---

提前感谢。

关于基于分辨率的不同图像副本的一个选项是

srcset

属性。它根据用户显示器的像素密度指定图像的源

例如：

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

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

---

.

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

---

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

查看您的代码会有所帮助，最好是使用一个。如果使用

width=“”height=“

根据图像的实际大小调整图像大小，则可能会导致模糊。+1支持有限，但最终采用此选项时，这是一件多么棒的事情：