Place the image at 100% width on mobile platforms

Question

so I am currently implementing a mobile version on my website, and everything is fine, except that I want to make the image fill 100% of the screen width, regardless of whether the user adjusts it horizontally or vertically . The image corresponds to 100%, as usual, on any mobile platform other than the base one, but not on the mobile device. Any suggestions?

I am currently 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 also tried:

 min-width:100%; 

Answer 1

The image corresponds to 100%, as usual, on any mobile platform that is not based on mobile devices, but not on a mobile device.

It does not work as expected, because you provide the parent .blog-img element .blog-img width of 100% .

You need to direct the nested img element of the descendant directly and set it to 100% width:

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

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

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

• Using width: 100% stretches 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 stretching more than it actually is.

Here is a 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 are optimizing your site for mobile browsers, be sure to set the watch tag metafile :

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

Answer 2

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

If you decide to go with DIV, width: 100%; , height: 100%; , and you can also include z-index if you want to go higher or for 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 that you include viewport in your HTML, which makes the page more stable.