响应式图像无法在 android 手机/chrome 浏览器上运行答案

【问题标题】：Responsive image not working on android phone/chrome browser响应式图像无法在 android 手机/chrome 浏览器上运行
【发布时间】：2014-12-15 09:12:51
【问题描述】：

请在下面找到我显示响应图像的代码：

<!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>

上面的响应式图像代码在iphone 上运行良好，但是当我在android 上打开页面时，图像在chrome 上显示并带有滚动条。在firefox 上运行良好。

更新在桌面上的响应式设计视图中，该页面在 firefox 上运行良好。它在iphone 上运行良好。但它在android 电话上的响应速度不如预期。在android 手机上，它会在浏览器和电子邮件应用程序中显示滚动条。

如何使图像具有响应性，以便它可以在 iphone、android、chrome、firefox 以及电子邮件中使用？？？

【问题讨论】：

标签： android css html google-chrome firefox

【解决方案1】：

我一直在摆弄 Android 上的 chrome、firefox 和自定义浏览器，以及 Windows 7 上 24 英寸屏幕上的 FF 和 chrome，它们都显示滚动条。

根据图像的宽度和高度（实际上是它的比例：3:2、4:3、16:9、16:10 等），当您在屏幕上调整大小时会看到滚动条，其比例与你的形象。我不确定，但很可能 FF 和 Chrome 的内部浏览器引擎使用相同的逻辑来处理图像大小（因此对 Android 的 Webview 和 WebChromeClient 视图产生相同的影响）而 iOS 没有。

你应该问问自己，为你解决这个问题是否值得所有的麻烦，或者干脆接受它（我会选择最后一个）。

看看下面的代码（下载=> Github renevanderlende/stackoverflow）它不仅是您问题的可接受解决方案，而且还为您的页面添加了一些易于理解的响应性，您可以摆弄与！

代码中的图片来自令人惊叹的Unsplash，这是一个寻找高质量公共领域照片的好地方。

如果您像我一样是初学者，访问 Codrops 确实是必须的。非常清晰和免费的教程，带有很棒的、可立即使用的代码！！

干杯，雷内

<!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>

【讨论】：

【解决方案2】：

试试……

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;
}

【讨论】：

【解决方案3】：

我认为你有更大的父元素...... 父元素之一比手机显示更大...检查一下

【讨论】：

【解决方案4】：

也许你应该给一个 CSS 代码...

试试看：

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

或者你溢出了任何父元素

【讨论】：

用 @media 查询尝试过，但仍然无法正常工作 - @Mego