2

私はこのイメージを持っています:

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

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>

携帯電話で表示したときに画像が伸びる原因は何ですか?

4

2 に答える 2

1

画面サイズに合わせて画像のサイズを変更するには、レスポンシブ レイアウトを使用する必要があります。レスポンシブ レイアウト ルールの例:

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

Web 検索エンジンでいつでも「レスポンシブ デザイン」を検索して、優れたリファレンスを入手できます。

于 2013-06-18T20:36:26.413 に答える