image not stretched on mobile devices caused horizontal scroll

Question

I have a webpage as linked:

Click Here

Everything is fine on PC or MAC. The issue is if you look at it on a mobile devices, you will find that the 3 images caused a horizontal scroll bar.

I use this to set the viewport for mobile device consideration:

<meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=320, maximum-scale=1.0, user-scalable=no">

I use a sprite method to set the div background, for showing the 3 images.

HTML:

<div class="demopic" id="category"></div>

CSS:

.demopic {
      text-align: center;
      margin: 10px auto;
      background: url(http://7te8e7.com1.z0.glb.clouddn.com/sprite_instructions.png);
    }

#category {
      width: 560px;
      height: 590px;
    }

My question is, based on my situation, is there a quick fix to achieve a responsive image? I don't want to show the horizontal scroll bar on mobile devices.

If I delete initial-scale=1.0 in <meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=320, maximum-scale=1.0, user-scalable=no"> , the image will be compressed for a proper size, but at the same time, the font-size will be resized as well.

Anyone give me some inspiration will be highly appreciated!

Answer 1

I think you're best bet is to use the standard img tag and make sure the image never expands wider than it's parent container (could just be the body element).

.my-image {
    max-width:100%;
    height:auto;
}

This should do the trick.

However, if you really want to use the div / background image approach things are slightly more complex.

.my-background-image {
    width:100%;
    height:0;
    padding-bottom:50%;
    background:url(img.png) no-repeat center center;
    background-size:100% auto;
}

Here we set an element to fill it's parents width. Then we make it's height proportional to it's width using padding-bottom (you'll need to tweak this). Finally we make the background size always fill the element. Worth noting that background size won't work in IE8.