马赛克图像 HTML/CSS [英] Mosaic of images HTML/CSS

查看：34
本文介绍了马赛克图像 HTML/CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在 div 中使用 portrait 图像 制作一个图像布局，其宽高比为 3:2.图片尺寸为327x491px.

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

HTML :

<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>... 很快 ...

CSS :

._pictures1 {宽度:935px；高度:490px；边距:-26px 0 0 59px;向左飘浮;顶部:20%；左:20%；位置:绝对；边框:1px 灰色实心；}._pictures1 div {位置:绝对；}._pictures1-01 {顶部:0px;左:35px;}._pictures1-02 {顶部:200px;左:0px;}/* ... 很快 ... */

代码片段:

body, html {宽度:100%；保证金:0;填充:0;}#裹 {宽度:100%；}.big_col, .medium_col, .small_col{向左飘浮;}图片{高度:自动；显示:块；保证金:0;填充:0;边界:无；向左飘浮;}.big_col {宽度:25%；}.medium_col{宽度:12.5%；}.small_col{宽度:6.25%；}.small_col img{宽度:100%；}.medium_col>img {宽度:100%；}.medium_col .small_img img {宽度:50%；}.big_col .small_img img {宽度:25%；}.big_col .medium_img img {宽度:50%；}.big_col img {宽度:100%；}

<div class="big_col"><div class="small_img"><img src="https://picsum.photos/id/241/328/492" alt=""/><img src="https://picsum.photos/id/147/328/492" alt=""/><img src="https://picsum.photos/id/258/328/492" alt=""/><img src="https://picsum.photos/id/237/328/492" alt=""/>
<div class="medium_img"><img src="https://picsum.photos/id/356/328/492" alt=""/><img src="https://picsum.photos/id/254/328/492" alt=""/>

<div class="small_img"><img src="https://picsum.photos/id/156/328/492" alt=""/><img src="https://picsum.photos/id/175/328/492" alt=""/><img src="https://picsum.photos/id/132/328/492" alt=""/><img src="https://picsum.photos/id/197/328/492" alt=""/>

<div class="big_col"><img src="https://picsum.photos/328/492" alt=""/>

<div class="small_col small_img"><img src="https://picsum.photos/id/210/328/492" alt=""/><img src="https://picsum.photos/id/152/328/492" alt=""/><img src="https://picsum.photos/id/142/328/492" alt=""/><img src="https://picsum.photos/id/189/328/492" alt=""/>

<div class="medium_col medium_img"><img src="https://picsum.photos/id/254/328/492" alt=""/><img src="https://picsum.photos/id/111/328/492" alt=""/>

<div class="small_col small_img"><img src="https://picsum.photos/id/198/328/492" alt=""/><img src="https://picsum.photos/id/201/328/492" alt=""/><img src="https://picsum.photos/id/145/328/492" alt=""/><img src="https://picsum.photos/id/198/328/492" alt=""/>

下一步:设计布局

使用钢笔、photoshop 或任何其他适合您的工具，如果您真的很优秀，甚至可以用您的大脑在脑海中表现出您想要的布局.

我设计了你可以在答案中看到的图片.

正如我之前所说，有很多布局可能性(列数和这些列中的图像大小)，因此在示例中我选择了 2 个大列 1 个中列和 2 个小列

328*2+164+82*2 = 984px(= 容器的宽度，所以它可以适合！)

最后一步:开始编码！

你可以看到这个结果

FIDDLE

此布局基于 floats 所以我们需要定义容器、列、图像的宽度、高度，以便它们可以很好地彼此相邻(因为我们已经在计算和设计中考虑过这一点，这很容易).

body, html {宽度:100%；保证金:0;填充:0;}#裹 {宽度:984px；高度:492px；}.big_col, .medium_col, .small_col{高度:492px；向左飘浮;}图片{显示:块；保证金:0;填充:0;边界:无；向左飘浮;}.big_col {宽度:328px；}.medium_col{宽度:164px；}.small_col{宽度:82px；}.big_img img {宽度:328px；高度:492px}.medium_img img {宽度:164px；高度:246px；}.small_img img {宽度:82px；高度:123px；}

<div class="big_col"><div class="small_img"><img src="https://picsum.photos/id/241/328/492" alt=""/><img src="https://picsum.photos/id/147/328/492" alt=""/><img src="https://picsum.photos/id/258/328/492" alt=""/><img src="https://picsum.photos/id/237/328/492" alt=""/>
<div class="medium_img"><img src="https://picsum.photos/id/356/328/492" alt=""/><img src="https://picsum.photos/id/254/328/492" alt=""/>

<div class="small_img"><img src="https://picsum.photos/id/156/328/492" alt=""/><img src="https://picsum.photos/id/175/328/492" alt=""/><img src="https://picsum.photos/id/132/328/492" alt=""/><img src="https://picsum.photos/id/197/328/492" alt=""/>

<div class="big_col"><img src="https://picsum.photos/328/492" alt=""/>

<div class="small_col small_img"><img src="https://picsum.photos/id/210/328/492" alt=""/><img src="https://picsum.photos/id/152/328/492" alt=""/><img src="https://picsum.photos/id/142/328/492" alt=""/><img src="https://picsum.photos/id/189/328/492" alt=""/>

<div class="medium_col medium_img"><img src="https://picsum.photos/id/254/328/492" alt=""/><img src="https://picsum.photos/id/111/328/492" alt=""/>

<div class="small_col small_img"><img src="https://picsum.photos/id/198/328/492" alt=""/><img src="https://picsum.photos/id/201/328/492" alt=""/><img src="https://picsum.photos/id/145/328/492" alt=""/><img src="https://picsum.photos/id/198/328/492" alt=""/>

I want to make an image layout with portrait images inside a div with a fixed aspect ratio of 3:2. The size of images is 327x491px.

The main issue is unwanted spaces between images. How do I align images as a mosaic using only 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

解决方案

To make a proper answer, I am first going to clarify the requirements :

  1. images all have the same aspect ratio : 3/2
  2. images shouldn't be cropped
  3. no space between images
  4. make a mosaic of images

You can have thousands of possibilities to display your images. I am going to make a simple layout that should show you the way to build your own.

Here is a FANCY FIDDLE of what you can achieve and here is what it looks like :

Code :

body, html {
    width:100%;
    margin:0;
    padding:0;
}
#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:492px
}
.medium_img img {
    width:164px;
    height:246px;
}
.small_img img {
    width:82px;
    height:123px;
}

<div id="wrap">
    <div class="big_col">
        <div class="small_img">
            <img src="https://picsum.photos/id/241/328/492" alt="" />
            <img src="https://picsum.photos/id/147/328/492" alt="" />
            <img src="https://picsum.photos/id/258/328/492" alt="" />
            <img src="https://picsum.photos/id/237/328/492" alt="" />
        </div>
        <div class="medium_img">
            <img src="https://picsum.photos/id/356/328/492" alt="" />
            <img src="https://picsum.photos/id/254/328/492" alt="" />
        </div>
        <div class="small_img">
            <img src="https://picsum.photos/id/156/328/492" alt="" />
            <img src="https://picsum.photos/id/175/328/492" alt="" />
            <img src="https://picsum.photos/id/132/328/492" alt="" />
            <img src="https://picsum.photos/id/197/328/492" alt="" />
        </div>
    </div>
    <div class="big_col">
        <img src="https://picsum.photos/328/492" alt="" />
    </div>
    <div class="small_col small_img">
        <img src="https://picsum.photos/id/210/328/492" alt="" />
        <img src="https://picsum.photos/id/152/328/492" alt="" />
        <img src="https://picsum.photos/id/142/328/492" alt="" />
        <img src="https://picsum.photos/id/189/328/492" alt="" />
    </div>
    <div class="medium_col medium_img">
            <img src="https://picsum.photos/id/254/328/492" alt="" />
            <img src="https://picsum.photos/id/111/328/492" alt="" />
    </div>
    <div class="small_col small_img">
            <img src="https://picsum.photos/id/198/328/492" alt="" />
            <img src="https://picsum.photos/id/201/328/492" alt="" />
            <img src="https://picsum.photos/id/286/328/492" alt="" />
            <img src="https://picsum.photos/id/145/328/492" alt="" />
    </div>
</div>

First step : think, calculate and think again

First : To make it simple let's say your images can have 3 sizes (I changed the image size by 1 px to make calculations easier) :

  1. big : 328*492px
  2. medium, 1/2 of big : 164*246px
  3. small, 1/4 of big : 82*123px

Second : As your images are all portraits and your container has the same height as the big image, you will have to work with 492px heigh columns that can have 3 widths :

  1. big : 328px wide, they can display all size images
  2. medium : 328/2 = 164px wide, they can display medium and small images
  3. small : 327/4 = 82px wide, they can only display small images

Third : How many columns and what image sizes? This is up to you, you will have to make a choice according to the total width of your container and the number of images you want to display.

But in your fiddle, the container (._pictures1) has a 935px width which will be impossible to achieve with the column widths chosen just before.

935/82 = 11.4024...

The closest you can get is 82*12 = 984px wide container.

You will either have to change the width of the container either change the sizes of images and columns to fit your initial width.

Or (spoiler) you can work with percentages, this can be an alternative especialy if you need your layout to be responsive but this can become complicated and I am trying to make things simple.

As I am sure you are curious and want to check it out, here is an example layout in a

Responsive mosaic of image fiddle

Code snippet :

body, html {
    width:100%;
    margin:0;
    padding:0;
}
#wrap {
    width:100%;
}
.big_col, .medium_col, .small_col{
    float:left;
}
img {
    height:auto;
    display:block;
    margin:0;
    padding:0;
    border:none;
    float:left;
}
.big_col {
    width:25%;
}
.medium_col{
    width:12.5%;
}
.small_col{
    width:6.25%;
}

.small_col img{
    width:100%;
}
.medium_col>img {
    width:100%;
}
.medium_col .small_img img {
    width:50%;
}
.big_col .small_img img {
    width:25%;
}
.big_col .medium_img img {
    width:50%;
}
.big_col img {
    width:100%;
}

<div id="wrap">
    <div class="big_col">
        <div class="small_img">
            <img src="https://picsum.photos/id/241/328/492" alt="" />
            <img src="https://picsum.photos/id/147/328/492" alt="" />
            <img src="https://picsum.photos/id/258/328/492" alt="" />
            <img src="https://picsum.photos/id/237/328/492" alt="" />
        </div>
        <div class="medium_img">
            <img src="https://picsum.photos/id/356/328/492" alt="" />
            <img src="https://picsum.photos/id/254/328/492" alt="" />
        </div>
        <div class="small_img">
            <img src="https://picsum.photos/id/156/328/492" alt="" />
            <img src="https://picsum.photos/id/175/328/492" alt="" />
            <img src="https://picsum.photos/id/132/328/492" alt="" />
            <img src="https://picsum.photos/id/197/328/492" alt="" />
        </div>
    </div>
    <div class="big_col">
        <img src="https://picsum.photos/328/492" alt="" />
    </div>
    <div class="small_col small_img">
        <img src="https://picsum.photos/id/210/328/492" alt="" />
        <img src="https://picsum.photos/id/152/328/492" alt="" />
        <img src="https://picsum.photos/id/142/328/492" alt="" />
        <img src="https://picsum.photos/id/189/328/492" alt="" />
    </div>
    <div class="medium_col medium_img">
            <img src="https://picsum.photos/id/254/328/492" alt="" />
            <img src="https://picsum.photos/id/111/328/492" alt="" />
    </div>
    <div class="small_col small_img">
            <img src="https://picsum.photos/id/198/328/492" alt="" />
            <img src="https://picsum.photos/id/201/328/492" alt="" />
            <img src="https://picsum.photos/id/145/328/492" alt="" />
            <img src="https://picsum.photos/id/198/328/492" alt="" />
    </div>
</div>

Next step : design the layout

Use a pen, photoshop, or any other tool that suits you, if you are realy good you can even use your brain to mentaly represent the layout you want.

I designed the image you can see at the bigininng of the answer.

As I said before there are many layout posibilities (number of columns and sizes of images in those columns) so for the example I chose 2 big columns 1 medium and 2 small ones

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

Last step : start coding!

You can see the result in this

FIDDLE

This layout is based on floats so we need to define in the width, height of container, columns, images so they can all fit next to each other nicely (as we have already thought about that with calculation and design, it's easy).

body, html {
    width:100%;
    margin:0;
    padding:0;
}
#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:492px
}
.medium_img img {
    width:164px;
    height:246px;
}
.small_img img {
    width:82px;
    height:123px;
}

<div id="wrap">
    <div class="big_col">
        <div class="small_img">
            <img src="https://picsum.photos/id/241/328/492" alt="" />
            <img src="https://picsum.photos/id/147/328/492" alt="" />
            <img src="https://picsum.photos/id/258/328/492" alt="" />
            <img src="https://picsum.photos/id/237/328/492" alt="" />
        </div>
        <div class="medium_img">
            <img src="https://picsum.photos/id/356/328/492" alt="" />
            <img src="https://picsum.photos/id/254/328/492" alt="" />
        </div>
        <div class="small_img">
            <img src="https://picsum.photos/id/156/328/492" alt="" />
            <img src="https://picsum.photos/id/175/328/492" alt="" />
            <img src="https://picsum.photos/id/132/328/492" alt="" />
            <img src="https://picsum.photos/id/197/328/492" alt="" />
        </div>
    </div>
    <div class="big_col">
        <img src="https://picsum.photos/328/492" alt="" />
    </div>
    <div class="small_col small_img">
        <img src="https://picsum.photos/id/210/328/492" alt="" />
        <img src="https://picsum.photos/id/152/328/492" alt="" />
        <img src="https://picsum.photos/id/142/328/492" alt="" />
        <img src="https://picsum.photos/id/189/328/492" alt="" />
    </div>
    <div class="medium_col medium_img">
            <img src="https://picsum.photos/id/254/328/492" alt="" />
            <img src="https://picsum.photos/id/111/328/492" alt="" />
    </div>
    <div class="small_col small_img">
            <img src="https://picsum.photos/id/198/328/492" alt="" />
            <img src="https://picsum.photos/id/201/328/492" alt="" />
            <img src="https://picsum.photos/id/145/328/492" alt="" />
            <img src="https://picsum.photos/id/198/328/492" alt="" />
    </div>
</div>

这篇关于马赛克图像 HTML/CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆