我一直在寻找这个主题，但我一直在找那些非常长的文章，我甚至不确定它们是否与我的问题相关，所以我在这里问：）
我正在创建一个移动网站，图片上有一些奇怪的东西：
假设我的图片是200x100像素，我正在使用以下代码：
<img src="img/my_img.png" width="200" height="100" />
或：
#myImg {
width: 200px;
height: 100px;
background: url(img/my_img.png);
}
当我在桌面上打开我的网站时，它看起来会很好，但是当我在手机上查看它时，图像的质量非常糟糕，看起来就像拉伸它一样。
我不知道它与我的HTML代码有什么关系，但也许是我的视口？
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
答案 0 :(得分：3)
您使用的设备是否使用视网膜设备？如果是这样，您将需要创建一个视网膜图像（400px / 200px），然后在CSS中将宽度/高度设置为200px / 100px。
答案 1 :(得分：2)
我刚刚回答了与此相似的另一个问题，关于图像，我遇到了完全相同的问题。
我很高兴地说我现在已经设法找到一个完美无缺的解决方案
首先，在创建图像时（如果可能）使它们比您需要的大4倍。所以他们是超高分辨率。
然后，当您将图像添加到HTML中时，请定义图像实际所需的高度和宽度。
例如，如果您想要图像查看100px x 100px，请创建400px x 400px的图像。然后在img标签中定义图像高度和宽度。
图像将保持分辨率和DPI，但字面上只是更小。
Yeay！我们的图像可以在所有设备上完美呈现！
我希望这有助于我的朋友！
答案 2 :(得分：-1)
还要小心，如果您使用的是WordPress，有时它会自动为您调整图像大小并呈现这些图像，