每個平臺的HTML對齊方式

我正在創建一個網頁，其中包含圖像的行和列。到目前爲止，我已經覆蓋了圖像，但對齊不好。我的意思是如果有大屏幕它會沒事的，但對於短屏幕它不適合，並且對齊幾乎沒有寬度。我只是想讓圖像根據屏幕的不同進行調整。每個平臺的HTML對齊方式

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Home Page</title> 
<style type="text/css"> 
#arr 
{ 
    width:auto; 
    margin-top:150px; 
    margin-bottom:30px; 
    height:auto; 

} 

.left1 
{ 
    width:200px; 
    height:200px; 
    float:left; 
    margin-left:40px; 
} 
.left2 
{ 
    width:200px; 
    margin-left:30px; 
    height:250px; 
    float:left; 
} 
.left3 
{ 
    width:200px; 
    margin-left:30px; 
    height:250px; 
    float:left; 
} 
.left4 
{ 
    width:200px; 
    height:200px; 
    float:left; 
    margin-left:30px; 
} 
.left5 
{ 
    width:200px; 
    margin-left:30px; 
    height:250px; 
    float:left; 
    margin-right:40px; 
} 


</style> 
</head> 

<body> 

<div class="left1"> 
<img src="Images/1TheShawshankRedemption.jpeg" alt="" width="200" height="250" title="The Shawshank Redemption (1994)" > 

</div> 
<div class="left2"> 
<img src="Images/2TheGodFather.jpg" alt="" width="200" height="250" title="The God Father (1972)" > 
</div> 
<div class="left3"> 
<img src="Images/3TheGodFather2.jpg" alt="" width="200" height="250" title="The God Father Part 2 (1974)" > 
</div> 
<div class="left4"> 
<img src="Images/4TheDarkKnight.jpg" alt="" width="200" height="250" title="The Dark Knight (2008)" > 
</div> 
<div class="left5"> 
<img src="Images/5PulpFiction.jpg" alt="" width="200" height="250" title="Pulp Fiction(1994)" > 
</div> 





</body> 
</html>

來源

2015-02-08 user2675040

你可以嘗試'img {max-width：100％};'這樣可以縮小圖像而不會損失比例。 – Caelea 2015-02-08 14:40:56

圖片來了，我認爲沒有縮放所需的圖像。問題來了，如果我選擇高分辨率顯示器，它顯示爲連續5個圖像，但如果我選擇低分辨率如平板電腦，它顯示爲4圖像在行和其他圖像在另一行，該圖像正好在第一行的第一個圖像的下方，沒有填充或任何東西。如果你有時間一次通過我的代碼 – user2675040 2015-02-08 14:54:29

你能提供一個jsfiddle嗎？ – Data2000 2015-02-08 15:33:12

如果您希望圖像收縮和增長不改變height:width比例，你可以在CSS中使用max-width屬性。

div > img { 
    max-width: 100% /* You could change it from 100% to something else if you want*/ 
}

來源

2015-02-08 14:43:45 Data2000

圖像來了，我認爲沒有縮放所需要的圖像。問題來了，如果我選擇高分辨率顯示器，它顯示爲連續5個圖像，但如果我選擇低像平板電腦這樣的分辨率，它會在一行中顯示爲4張圖像，而在另一行中顯示爲其他圖像，並且該圖像位於第一行中的第一張圖像的正下方，並且沒有填充或任何東西。如果您有時間通過我的代碼 – user2675040 2015-02-08 15:15:08

你能提供一個jsfiddle嗎？ – Data2000 2015-02-08 15:32:19

http://jsfiddle.net/Lgkhd9yb/ – user2675040 2015-02-08 16:06:31

每個平臺的HTML對齊方式

回答

相關問題