每个平台的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对齐方式

回答

相关问题