Html 在移动浏览器上查看图像时，图像看起来很糟糕，但在web浏览器上则非常好

我有这样的图像：

当我在网络浏览器上渲染它时，它看起来很好，但如果我从手机浏览器中查看它，它看起来真的拉伸了

下面是我在div中显示它的方式：

<div style="float: left; width: 300px; padding-top: 15px;">
        <p><h3>Business Planning</h3></p>
        <div style="float: left;">
            <p><a href="https://apps.apple.com/us/app/business-plan-and-coach/id554845193">
                <img src="https://i.stack.imgur.com/SvB20.png" style="border: none;" alt="iPhone and iPad Business Plan App" /></a>
            </p>
        </div>
        <div style="float: left; padding-left: 10px;">
            <p>
            <a href="https://play.google.com/store/apps/details?id=business.premium">
            <img src="http://problemio.com/img/google-play-icon.png" style="border: none;" alt="Android Business Plan App" /></a>
            </p>
        </div>
        <div style="clear:both;"></div>
</div>

商业计划

---

你知道在手机上观看时，是什么导致图像拉伸吗？

你必须使用响应式布局，根据屏幕大小调整图像大小。 响应式布局规则示例：

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

---

您可以随时在任何web搜索引擎中搜索“responsive design”，以获得大量参考资料。

使用Chrome的inspector查看图像元素：

<img src="http://www.problemio.com/img/app-store-icon.png" style="border: none; height: 99%; width: 99%;" alt="iPhone and iPad Business Plan App">

如果不想更改图像的大小，请忽略这些选项，或将其设置为

auto

另一方面，如果要调整大小，请参见：

---

您使用的是哪种设备？视网膜显示？@MehdiKaramosly是一款常规的Android浏览器。这是一个网站：Problemio.com，你可以看到它是如何呈现的。你有这个网站的移动版css吗？另外，在我的史前设备上缩放（opera浏览器）时，图像看起来很好…：）我在Android 4.1.2默认浏览器中确认拉伸行为。

height: 99%;
width: 99%;