自適應圖片在Android手機/ Chrome瀏覽器上不起作用

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和電子郵件中使用？

Answer 1

我一直在用chrome，firefox和Android上的自定義瀏覽器，在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>

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 個解決方案

解決方案1
1 已采納 2014-10-20 22:00:30

解決方案2
0 2014-10-20 11:50:21

解決方案3
0 2014-10-20 15:34:37

解決方案4
0 2014-10-20 22:25:38

自適應圖片在Android手機/ Chrome瀏覽器上不起作用

問題描述

4 個解決方案

解決方案1 1 已采納 2014-10-20 22:00:30

解決方案2 0 2014-10-20 11:50:21

解決方案3 0 2014-10-20 15:34:37

解決方案4 0 2014-10-20 22:25:38

解決方案1
1 已采納 2014-10-20 22:00:30

解決方案2
0 2014-10-20 11:50:21

解決方案3
0 2014-10-20 15:34:37

解決方案4
0 2014-10-20 22:25:38