Image looks terrible when viewed on a mobile browser, but perfectly fine on a web browser

Question

I have this image:

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

When I render it on a web browser, it looks fine, but if I look at it from my phone's browser, it looks really stretched.

Here is how I display it in a 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>

Any idea what may be causing the image to stretch when viewing on a mobile phone?

@MehdiKaramosly A regular Android browser. Here is the site: Problemio.com so you can see how it renders. — Genadinik, Jun 18 '13 at 20:26
Do you have mobile version of css for this site at all? P.S. image looks fine, when zoomed (opera browser) on my prehistoric device... :) — sinisake, Jun 18 '13 at 20:30
I confirm the stretching behavior in my Android 4.1.2 default browser. — Telmo Marques, Jun 18 '13 at 20:34

score 1 · Answer 1 · answered Jun 18 '13 at 20:36

You'll have to use a responsive layout to resize the image according to the screen size. Example of responsive layout rule:

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

You can always search "responsive design" at any web search engine to get great references.

score 1 · Accepted Answer · edited May 23 '17 at 11:59

Looking at the image element using Chrome's 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">

I have to say the problem resides in this styles:

height: 99%;
width: 99%;

Omit these, or set them to auto, if you don't want the image to change size.

On the other hand, if you do want to resize please see: Resize image proportionally with CSS?

Image looks terrible when viewed on a mobile browser, but perfectly fine on a web browser

2 Answers2