CODEWITHSUNDEEP
androidcsshtmlgoogle-chromefirefox
Valay
Valay

Reputation: 1999

Responsive image not working on android phone/chrome browser

Please find below my code of showing responsive image:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxxxx</title>
<style type="text/css">
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
 img {
  max-width: 100%;
  height: auto;
  width:100%;
}
</style>
</head>

<body>
<!--<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top">        
        <img src="http://www.xxxxx.com/images/Events/xxxxx.png" alt="xxxxx" />
    </td>
  </tr>  
</table>-->
<div>
    <img src="http://www.xxxxx.com/images/Events/xxxxx.png" alt="xxxxx" />
</div>
</body>
</html>

Above code for responsive image works fine on iphone but when I open the page on android the image displays with a scrollbar on chrome. On firefox it works fine.

Update The page works fine on firefox in responsive design view on desktop. It works fine on iphone. But it does not work as responsive as it's expected on android phone. On android phone, it shows scrollbars in browser and in email application as well.

How do I make image responsive so that it works on iphone, android, chrome, firefox and in an email as well ???

Upvotes: 0

Views: 3861

Answers (4)

Rene van der Lende
Rene van der Lende

Reputation: 5301

I have been fiddling with chrome, firefox and a custom browser on Android and with FF and chrome on a 24" screen on Windows 7 and they all show scrollbars.

Depending on the width and height of your image (actually its ratio: 3:2, 4:3, 16:9, 16:10 etc.) you will see scrollbars when resizing it on a screen with a different ratio than your image. I am not sure, but it may well be that the internal browser engines of FF and Chrome use the same kind of logic to handle image sizing (hense the same effect on Android's Webview and WebChromeClient views) and iOS does not.

You should ask yourself if it is worth all the trouble getting this issue worked out for you or simply accept it as it is (I'd opt for the last).

Have a look at the code below (download => Github renevanderlende/stackoverflow) It is not only an acceptable solution for your issue, but also adds some easy to understand Responsiveness to your page you can fiddle with!

The images in the code are from amazing Unsplash, a fantastic place to find high-quality public domain photos.

And if you are a beginner like me, a visit to Codrops really is a must. Great clear and free tutorials with awesome, ready to use code!!

Cheers, Rene

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<title>question-26464777</title>
	
	<style>
		div { background-size: cover; }   /* fully cover a DIV background */
		img { width: 100%; }    /* Maximize IMG width (height will scale) */
		
		/* Sample media query for responsive design, Resize your browser
		   to see the effect. DO check http://chrisnager.github.io/ungrid */
		@media ( min-width :30em) {
			.row { width: 100%; display: table; table-layout: fixed }
			.col { display: table-cell }
		}
	</style>
</head>

<body>
<div class="row">
    <div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/1.jpg" alt="image 1"></div>
    <div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/2.jpg" alt="image 2"></div>
    <div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/4.jpg" alt="image 4"></div>
    <div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/5.jpg" alt="image 5"></div>
    <div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/6.jpg" alt="image 6"></div>
    <div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/8.jpg" alt="image 8"></div>
</div>
<div class="row">
    <div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/4.jpg" alt="image 4"></div>
</div>
</body>
</html>

Upvotes: 1

Adrian
Adrian

Reputation: 2012

Try...

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    overflow-x:hidden;


}
 img, div {
  max-width: 100%;
  height: auto;
  width:100%;
  overflow-x:hidden;
}

Upvotes: 0

Mego
Mego

Reputation: 164

You have bigger the parent elements I think... One of parent elements are bigger that phone display...check it

Upvotes: 0

Mego
Mego

Reputation: 164

MAybe you should give a CSS code...

try it:

@media screen.... {
img {
max-width:100%;
}
}

Or you have overflowed any parent element

Upvotes: 0

Related Questions