Question

请在下方找到显示自适应图片的代码：

<!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以及电子邮件中使用？< / strong>

Answer 1

我一直在使用Chrome，firefox和Android上的自定义浏览器，在Windows 7上的24英寸屏幕上使用FF和Chrome，它们都显示滚动条。

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

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

请查看下面的代码（download =＆gt; 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>

Answer 2

你应该给CSS代码......

试一试：

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

或者你已经溢出了任何父元素

Answer 3

我认为你拥有更大的父元素...... 其中一个父元素比电话显示更大...检查

Answer 4

...试

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

响应式图像不适用于Android手机/ Chrome浏览器

4 个答案: