Question

我有这张图片：

http://www.problemio.com/img/app-store-icon.png

当我在网络浏览器上呈现它时，它看起来很好，但如果我从手机的浏览器中查看它，它看起来真的很紧张。

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

<div style="float: left; width: 300px; padding-top: 15px;">
        <p><h3>Business Planning</h3></p>
        <div style="float: left;">
            <p><a href="http://itunes.apple.com/us/app/business-plan-and-coach/id554845193">
                <img src="http://www.problemio.com/img/app-store-icon.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>

在移动电话上查看时，有什么可能导致图像拉伸的情况吗？

Answer 1

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

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

您可以随时在任何网络搜索引擎中搜索“响应式设计”，以获得很好的参考。

Answer 2

使用Chrome的检查器查看图像元素：

<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">

我不得不说问题存在于这种风格中：

height: 99%;
width: 99%;

如果您不希望图像改变大小，请忽略这些，或将它们设置为auto。

另一方面，如果您想调整大小，请参阅： Resize image proportionally with CSS?

在移动浏览器上查看时图像看起来很糟糕，但在网络浏览器上完全没问题

2 个答案: