響應圖像

請在下面找到我的顯示響應圖像的代碼：響應圖像

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

回答

相關問題