Have image fit 100% width on mobile platforms

Question

so I am currently implementing a mobile version to my website and everything is fine except I want to be able make it so the image will fill 100% width of the screen whether the user tuns it horizontally or vertically. The image fits 100% like normal on any non-based mobile platform, but does not on a mobile device. Any suggestions?

I currently am using

.blog{
    padding:10px;
    border-bottom:2px solid #eeeeee;
    padding:10px;
    background:#ececec;
}
.blog-img{
    text-align:left;
    width:100%;
    margin:0 auto;
    padding:10px 0 5px 0;
}

I've also tried:

min-width:100%;

Berretta

Did you using any framework for example Bootstrap v3.0.0? – Tripody

No framework used for this. – Berretta

Answer 1

The image fits 100% like normal on any non-based mobile platform, but does not on a mobile device.

It is not working as expected because you are giving the parent element .blog-img a width of 100%.

You need to directly target the nested img descendant element and give it a width of 100%:

.blog-img img {
  height: auto;
  width: 100%;
}

Depending on what you're trying to achieve, setting a min-width of 100% may be better in certain cases.

.blog-img img {
  height: auto;
  min-width: 100%;
}

• Using width: 100% will stretch the img element to a width of 100%.
• Using max-width: 100% will increase the width of the img element to the maximum total width of the img resource. In other words, this will prevent the img element from being stretched larger than it actually is.

Here is an minimal example highlighting the difference:

<p>Using <code>max-width: 100%</code></p>
<img style="max-width: 100%;" src="http://placehold.it/50" />


<p>Using <code>width: 100%</code></p>
<img style="width: 100%;" src="http://placehold.it/50" />

Since you're optimizing your site for mobile browsers, be sure to set a viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Saturated

I can upload the css/html to JSfiddle – Berretta

Works perfectly. Thanks alot for the help, accepting your answer. – Berretta

Answer 2

How about this, add the image you want, as a background of a DIV or the document's BODY.

If you decide to go with a DIV, width: 100%;, height: 100%; and you can also include z-index, if you wish to go above or behind some content.

{
    background-image: url(http://arianapierce.com/wp-content/uploads/2010/11/simple-lights-twitter-background.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

I would also suggest you include viewport in your HTML, it makes the page much more stable.

Brother

Answer 3

 <img src="/static/.." class="fit">

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

This keep image size for big screens and shrink it for small ones.

Circumcise

OP has not asked for keeping original image size on big screens, instead they want 100% width-fitting everywhere. not every browser has the default behavior of image expanding till max-width.. – Potomac

"fit 100% width on mobile platforms" doesn't mean everywhere. I post most used case (at least I've looked for and apply this solution recently on my site) – Circumcise