Question

如何自动将图片空间分隔为屏幕'html

的大小

Answer 1

是的，请发布你的HTML和CSS。

否则，如果您制作图库是将图片裁剪为相同的高度和宽度，然后添加

，那么真正有用的是什么

img{
width:100%;
}

我会避免设置高度，除非你让你的所有照片都相同的高度，因为它可能会使响应有点时髦。如果宽度设置为100％，则高度应自动由包含元素的大小设置;

Answer 2

这是一个让图像均匀得到的例子。通过CSS在Div中水平放置;

<强> CSS

#thumbs {   
    width: 540px;
    margin-top:90px;
    margin-left: auto; 
    margin-right: auto;

     text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
#thumbs a {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

<强> HTML

<div id="thumbs">
    <a id="single_image1" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a id="single_image2" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a id="single_image3" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <span class="stretch"></span>
</div>

如何自动分隔多张图片以在屏幕'html的宽度上均匀分布

2 个答案: