Question

您好我正在尝试创建一个图像库，该图像库将具有固定尺寸的图像行居中。问题是每行中的图像数量会根据窗口大小而改变，因此我不能使用多个容器和margin: auto它们。这是一个示例页面，可以完成我之后的工作： http://inspire-gwen.tumblr.com/ 您会注意到，当您更改窗口大小时，图像行会发生变化，但每个图像行仍然在页面上居中。是否可以用纯CSS实现它？这是我编写的代码，带有一些随机图像：

HTML

<!DOCTYPE HTML>
<body>
    <div class="img_container">
        <div><img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg"></div>
        <div><img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg"></div>
        <div><img src="http://i.imgur.com/ElxvqJK.jpg"></div>
        <div><img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg"></div>
    </div>
</body>

CSS

.img_container img { 
    max-height: 300px;
    display: block;
    width: auto;
    height: auto;
    vertical-align: bottom;
}

.img_container div {
    padding: 5px;
}

Answer 1

默认情况下，图片是内联项目，将它们包装在“div”标签中，目前正在将它们作为块项目。你可以用更简单的方式解决这个问题：

HTML

<!DOCTYPE HTML>
<body>
    <div class="img_container">
        <img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg">
        <img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg">
        <img src="http://i.imgur.com/ElxvqJK.jpg">
        <img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg">
    </div>
</body>

CSS

.img_container {
    text-align: center;
}
.img_container img { 
    max-height: 300px;
    width: auto;
    height: auto;
    vertical-align: bottom;
    margin: 5px;
}

Answer 2

是的，这很有可能......

到目前为止，您一直使用px来定义图片宽度...您需要的是%。

这是JSFIDDLE：http://jsfiddle.net/uh1wvaev/2/

这是我的代码：

HTML

<div class="img_container">
    <div class="img_wrapper">
        <img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg">
    </div>
    <div class="img_wrapper">
        <img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg">
    </div>
    <div class="img_wrapper">
        <img src="http://i.imgur.com/ElxvqJK.jpg">
    </div>
    <div class="img_wrapper">
        <img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg">
    </div>
</div>

CSS

.img_wrapper {
    width: 25%;
    float: left;
}
img {
    width: 100%;
}

我做的是，我给每个<DIV></DIV>一类"img_wrapper"。然后我给每个img_wrapper宽度为页面的25％。因此，每当调整页面大小时，img的宽度将为新窗口大小的25％。

窗口上的CSS中心图像行调整大小

2 个答案:

如果您有任何疑问或需要进一步的帮助，请在下面留言