图像马赛克HTML/CSS

Question

我想使与图像布局肖像图像内的div与固定纵横比3:2.图像的大小是327x491px.

主要问题是图像之间不需要的空间.如何仅使用HTML/CSS 将图像对齐为马赛克？

HTML:

<div id="pictures1" class="_pictures1 grid">
    <div class="_pictures1-01"><div style="width:125px;height: 188px; background: red;"><img src="" width="125" height="188" alt="" /></div></div>
    <div class="_pictures1-02"><div style="width:192px;height: 288px;background: green;"><img src="" width="192" height="288" alt="" /></div></div>
     ... SO ON ...
</div> 

CSS:

._pictures1 {
    width: 935px; height: 490px;
    margin: -26px 0 0 59px;
    float: left;
    top: 20%; left: 20%;
    position: absolute;
    border: 1px gray solid;
}
._pictures1 div {position: absolute;}
._pictures1-01 {top: 0px; left: 35px;}
._pictures1-02 {top: 200px; left: 0px;}
/* ... SO ON ... */

的jsfiddle

Answer 1

为了得到正确答案,我首先要澄清要求:

1. 图像都具有相同的宽高比:3/2
2. 不应裁剪图像
3. 图像之间没有空格
4. 制作图像马赛克

您可以拥有数千种显示图像的可能性.我将制作一个简单的布局,告诉你如何构建自己的布局.

这是你可以实现的FANCY FIDDLE,它的外观如下:

第一步:思考,计算和思考

第一:为简单起见,假设您的图像可以有3种尺寸(我将图像尺寸改为1像素,使计算更容易):

1. 大 : 328*492px
2. 中,大1/2 164*246px
3. 小,1/4大: 82*123px

第二:由于您的图像都是肖像,并且您的容器与大图像具有相同的高度,因此您必须使用可以具有3个宽度的492px高度列:

1. 大:328px宽,他们可以显示所有大小的图像
2. 中:328/2 = 164px宽,可以显示中小图像
3. 小:327/4 = 82px宽,它们只能显示小图像

第三:列数和图像尺寸是多少？这取决于您,您必须根据容器的总宽度和要显示的图像数量进行选择.

但是在你的小提琴中,容器(._pictures1)的935px宽度是以前选择的列宽度无法实现的.

935/82 = 11.4024...

你最接近的是82*12 = 984px宽容器.

您将需要更改容器的宽度,或者更改图像和列的大小以适合您的初始宽度.

或者(剧透)您可以使用百分比,这可能是另一种选择,特别是如果您需要您的布局响应,但这可能变得复杂,我试图使事情变得简单.

因为我确定你很好奇,想要查看它,这里是一个示例布局

响应式马赛克的图像

下一步:设计布局

使用笔,photoshop或任何其他适合您的工具,如果你真的很好,你甚至可以用你的大脑来表示你想要的布局.

我设计了你可以在答案的最大限度看到的图像.

正如我之前所说,有许多布局可能性(列数和列中的图像大小)所以我举了两个大列1个中型和2个小型列.

328*2+164+82*2 = 984px ( = width of container so it can fit!)

最后一步:开始编码!

你可以在这里看到结果

小提琴

这个布局是基于浮动的,所以我们需要在容器的宽度,高度,列,图像中定义,以便它们可以很好地相互贴合(正如我们已经考虑过计算和设计,这很容易).

CSS:

#wrap {
    width:984px;
    height:492px;
}
.big_col, .medium_col, .small_col{
    height:492px;
    float:left;
}
img {
    display:block;
    margin:0;
    padding:0;
    border:none;
    float:left;
}
.big_col {
    width:328px;
}
.medium_col{
    width:164px;
}
.small_col{
    width:82px;
}
.big_img img {
    width:328px;
    height:493px
}
.medium_img img {
    width:164px;
    height:246px;
}
.small_img img {
    width:82px;
    height:123px;
}

然后HTML标记:

<div id="wrap">
    <div class="big_col">
        <div class="small_img">
            <img src="http://www.lorempixum.com/327/491/abstract" alt="" />
            <img src="http://www.lorempixum.com/g/327/491" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
            <img src="http://www.lorempixum.com/327/491/nature" alt="" />
        </div>
        <div class="medium_img">
            <img src="http://www.lorempixum.com/g/327/491/business" alt="" />
            <img src="http://www.lorempixum.com/327/491/people" alt="" />
        </div>
        <div class="small_img">
            <img src="http://www.lorempixum.com/g/327/491/food" alt="" />
            <img src="http://www.lorempixum.com/327/491" alt="" />
            <img src="http://www.lorempixum.com/327/491/cats" alt="" />
            <img src="http://www.lorempixum.com/327/491/people" alt="" />
        </div>
    </div>
    <div class="big_col">
        <img src="http://www.lorempixum.com/327/491/nature" alt="" />
    </div>
    <div class="small_col small_img">
        <img src="http://www.lorempixum.com/g/327/491/transport" alt="" />
        <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
        <img src="http://www.lorempixum.com/327/491/nature" alt="" />
        <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
    </div>
    <div class="medium_col medium_img">
            <img src="http://www.lorempixum.com/327/491/nightlife" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/transport" alt="" />
    </div>
    <div class="small_col small_img">
            <img src="http://www.lorempixum.com/327/491/fashion" alt="" />
            <img src="http://www.lorempixum.com/327/491/nature" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
            <img src="http://www.lorempixum.com/327/491" alt="" />
    </div>
</div>