html - 图像的马赛克 HTML/CSS

标签 html css responsive-design grid-layout aspect-ratio

我想在 div 中使用 portrait images 进行图像布局，固定纵横比为 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

最佳答案

为了做出正确的回答，我首先要澄清要求:

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

您可以有数千种显示图像的可能性。我将制作一个简单的布局，向您展示如何构建您自己的布局。

这是一个 FANCY FIDDLE 您可以实现的目标如下所示:

Mosaic of images in html/css - example layout

代码:

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>

第一步:思考、计算、再思考

首先:为了简单起见，假设您的图像可以有 3 种尺寸(我将图像尺寸更改为 1 px 以便于计算):

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

其次:由于您的图像都是肖像，并且您的容器与大图像具有相同的高度，因此您将不得不使用 492px 高度列，可以有 3 个宽度:

  1. 大:328px 宽，它们可以显示所有尺寸的图像
  2. medium : 328/2 = 164px 宽，它们可以显示中小图像
  3. small : 327/4 = 82px 宽，它们只能显示小图片

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

但是在您的 fiddle 中，容器 (._pictures1) 的宽度为 935px，这将无法通过之前选择的列宽实现。

935/82 = 11.4024...

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

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

或者(剧透)你可以使用百分比，这可能是一个替代方案，特别是如果你需要你的布局具有响应性，但这可能会变得复杂，我正在努力让事情变得简单。

我相信你很好奇并且想检查一下，这里是一个示例布局

Responsive mosaic of image fiddle

代码片段:

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>

下一步:设计布局

使用钢笔、photoshop 或任何其他适合您的工具，如果您真的很厉害，您甚至可以动动脑筋在心里描绘出您想要的布局。

我设计了您在回答问题时可以看到的图像。

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

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

最后一步:开始编码!

可以看到结果

FIDDLE

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

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 - 图像的马赛克 HTML/CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22221333/

上一篇：javascript - 如何从 Bootstrap 选择下拉列表中获取选定值

下一篇：html - 如何在父div的框架内保持 float div？

相关文章：

css - 具有不同类型的页面背景，分为水平部分

php - 为 mysql 连接定义

javascript - $.each 不更新 css 宽度

html - 如何通过html或css横向显示链接图片

css - 如何使用css媒体查询切换动画

reactjs - React js Material-UI 响应式表格

jquery - 100vh div 的内容显示在下一个 div

javascript - 在没有 eval() 的情况下动态更改 innerText 的开始

php - WordPress 子主题包括包含文件

javascript - Jssor 元素符号导航器未出现

©2024 IT工具网  联系我们