我有这张图片:
http://www.problemio.com/img/app-store-icon.png
当我在网络浏览器上渲染它时,它看起来不错,但如果我从手机浏览器上看它,它看起来真的很拉伸(stretch)。
这是我在 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="/image/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>
知道在手机上查看时可能导致图像拉伸(stretch)的原因吗?
最佳答案
使用 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%;
如果您不希望图像改变大小,请忽略这些,或将它们设置为自动
。
另一方面,如果您确实想调整大小,请参阅: Resize image proportionally with CSS?
关于html - 在移动浏览器上查看图像时看起来很糟糕,但在网络浏览器上查看时则完美,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17178165/