响应图像

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

<!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和电子邮件以及???

来源

2014-10-20 Valay

我一直在摆弄chrome，firefox和cus在Android上使用tom浏览器，在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> 
 
\t <meta charset="UTF-8" /> 
 
\t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t 
 
\t <title>question-26464777</title> 
 
\t 
 
\t <style> 
 
\t \t div { background-size: cover; } /* fully cover a DIV background */ 
 
\t \t img { width: 100%; } /* Maximize IMG width (height will scale) */ 
 
\t \t 
 
\t \t /* Sample media query for responsive design, Resize your browser 
 
\t \t to see the effect. DO check http://chrisnager.github.io/ungrid */ 
 
\t \t @media (min-width :30em) { 
 
\t \t \t .row { width: 100%; display: table; table-layout: fixed } 
 
\t \t \t .col { display: table-cell } 
 
\t \t } 
 
\t </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>

来源

2014-10-20 22:00:30

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

尝试：

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

，或者您有任何溢出父元素

来源

2014-10-20 11:50:21 Mego

试过用'@ media'查询，但它仍然不工作 - @Mego – Valay 2014-10-20 12:39:33

你有更大的我觉得父元素.. 其中一个父元素比手机显示器更大...检查它

来源

2014-10-20 15:34:37 Mego

尝试...

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

来源

2014-10-20 22:25:38 Adrian

回答

相关问题