Responsive mosaic of image

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

为了得到正确答案，我首先要澄清要求：

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

您可以有数千种可能性来显示图像。我将制作一个简单的布局，告诉你构建自己的布局。

以下是您可以实现的 FANCY FIDDLE ，以下是它的样子：

Mosaic of images in html/css - example layout

第一步：思考，计算并重新思考

首先：为简单起见，假设您的图片可以有3种尺寸（我将图像尺寸更改为1像素，以便更轻松地进行计算）：

big：328*492px
中，大1/2的一半：164*246px
小，1/4大：82*123px

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

大：328px宽，可以显示所有尺寸的图片
中：328/2 = 164px宽，可以显示中小图像
小：327/4 = 82px宽，他们只能显示小图片

第三：列数和图片大小是多少？这取决于您，您必须根据容器的总宽度和要显示的图像数量进行选择。

但是在你的小提琴中，容器（._pictures1）的宽度为935px，使用之前选择的列宽度无法实现。

935/82 = 11.4024...

您最接近的是82*12 = 984px宽容器。

您必须更改容器的宽度，或者更改图像和列的大小以适合您的初始宽度。

或（剧透）你可以使用百分比，这可能是另一种选择，特别是如果你需要你的布局响应，但这可能会变得复杂，我试图让事情变得简单。

我确信您很好奇，想要查看它，这是

Responsive mosaic of image

下一步：设计布局

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

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

正如我之前所说，有许多布局可能性（这些列中的列数和图像大小）所以我在这个例子中选择了2个大列1个中型和2个小型

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

最后一步：开始编码！

您可以在此

FIDDLE

这个布局基于floats所以我们需要在容器的宽度，高度，列，图像中定义，以便它们可以很好地相互贴合（正如我们已经考虑过计算和设计，很容易）。

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>

Answer 2

如果您设置了一个维度或另一个维度，而不是两者，则图像应该流畅地调整大小。尝试将宽度设置为百分比单位。

Answer 3

首先，要删除图片之间的空间，只需将设置移至“0”padding和margin。

然后，为了达到你想要的，你可以使用或组合这些策略：

1）将像素中的固定大小分配给其中一个尺寸：其他尺寸将自动缩放。

2）您可以通过javascript计算所需的大小，并以dinamically方式分配值。例如，使用jQuery框架：

$(img).each(function(){
 var h = this.height();
 var w = this.width();


 if (w => h){
  this.attr('width', w*0.66);
}
else {
  this.attr('height',h*.066);
}
});

3）您可以根据需要使用css background-image作为div，background-size: cover或background-size: contain，静态或dinamically（w3c docs

Answer 4

如果你想动态保持相同的位置和比例，绝对定位似乎不是最好的选择。

原生HTML流程通常是最佳选择。 绝对定位就像维生素片。你需要它时使用它，但它不是你的主要食物。 ;）

我要做的是：

只需根据需要定位容器（例如居中），并根据窗口/部分的百分比调整其宽度。



然后你把你的._pictures1-xx div放在里面，并调整照片的大小。宽度使用容器的百分比。高度将自动保持比率（*）



然后我会制作._pictures1-xx divs显示＆＃34; inline-block＆＃34;和漂浮＆＃34;左＆＃34;。然后是一个清晰的＆＃34;两个＆＃34;在最后一张照片之后关闭容器。

（*）提醒：宽度或高度默认值为＆＃34; auto＆＃34;，表示当另一个是px /％值时保持图像比例的任何大小。当你的照片出现时，水平边距本身变得充满活力。定义高度，以保持你的照片＆＃39;比。如果你定义宽度和离开高度自动，那么高度是动态的，以保持照片＆＃39;比例和利润不会改变。

我希望这很有帮助。

Answer 5

我想提供简单的解决方案。

您只需使用DIV包装img标记即可。你应该将CSS应用于这个包装好的DIV。

示例代码

而不是这个

<img src='some_image.jpg'>

使用以下种类的结构

<div class="img_wrapper">
     <img src='some_image.jpg'>
</div>

CSS

//  suggestion: target IMG with parent class / ID
.img_wrapper img{
    width: 100%; 
    height: auto;
}

班级.img_wrapper内的所有图片都有适当的宽高比。

Answer 6

用div包装你的图像。根据比例设置div的宽度和高度。仅为图像提供高度。如果您希望图像只占用空间，则需要使用display：inline also

Answer 7

尝试这样的事情

定型

body{
    background: black;
    width:80%;
    margin:5em auto;
    display:block;
}
.wrapper{
    background:#FFF;
    float:left;
}   

.container{
    height:476px;
    width:192px;
    display:inline-block;
    float:left;
}
.small{
    height:188px;
    width:125px;
    display:block;
    margin:0 auto;
    background:#333;
}
.medium{
    background:#666;
    width:192px;
    height:288px;
}
.large{
    height:476px;
    width:200px;
    background:#999;
    display:inline-block;
    float:left;
}

这是HTML

<div class="wrapper">
    <div class="container">
        <div class="small">
            <div class="small_inner">
            </div>
        </div>        
        <div class="medium">
            <div class="medium_inner">
            </div>
        </div>
    </div>
    <div class="large">
        <div class="large_inner">
        </div>
    </div>
    <div class="container">
        <div class="medium">
            <div class="medium_inner">
            </div>
        </div>
        <div class="small">
            <div class="small_inner">
            </div>
        </div>  
    </div>
    <div class="large">
        <div class="large_inner">
        </div>
    </div>
    <div class="container">
        <div class="small">
            <div class="small_inner">
            </div>
        </div>        
        <div class="medium">

            <div class="medium_inner">
            </div>
        </div>
    </div>
</div>

Answer 8

img{
 height: auto;
 width: 50%
}

Answer 9

根据我的经验：如果您只设置高度或宽度（不是）的尺寸，图像将相应缩放。

图像马赛克HTML / CSS

9 个答案:

第一步：思考，计算并重新思考

Responsive mosaic of image

下一步：设计布局

最后一步：开始编码！

FIDDLE

示例代码

CSS