请在下面找到我显示响应式图片的代码:
<!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 上运行良好。
更新
该页面在桌面上的响应式设计 View 中在 firefox 上运行良好。它在 iphone 上运行良好。但它在 android 手机上的响应速度不如预期。在 android 手机上，它会在浏览器和电子邮件应用程序中显示滚动条。
我如何使图像响应，以便它在 iphone、android、chrome、firefox 上工作code> 以及电子邮件中 ???
最佳答案
我一直在 Android 上摆弄 chrome、firefox 和自定义浏览器，在 Windows 7 的 24"屏幕上摆弄 FF 和 chrome，它们都显示滚动条。
根据图像的宽度和高度(实际上它的比例:3:2、4:3、16:9、16:10 等)，在屏幕上以不同比例调整图像大小时会看到滚动条你的形象。我不确定，但 FF 和 Chrome 的内部浏览器引擎很可能使用相同类型的逻辑来处理图像大小调整(因此对 Android 的 Webview 和 WebChromeClient View 产生相同的效果)而 iOS 则没有。
您应该问问自己，为您解决这个问题是否值得所有的麻烦，或者干脆接受它的现状(我会选择最后一个)。
看看下面的代码(下载 => Github renevanderlende/stackoverflow )它不仅是您问题的可接受解决方案，而且还为您的页面添加了一些易于理解的响应度，您可以摆弄与!
代码中的图片来自amazing Unsplash ，这是一个寻找高质量公共(public)领域照片的好地方。
如果您像我一样是初学者，请访问 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>关于android - 响应图像不适用于 android 手机/chrome 浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26464777/