图像拼接HTML/CSS

Question

我希望在一个具有固定长宽比为3:2的div内制作一个包含竖向图片的布局，图片的尺寸为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

- Developer Desk

---

我认为最简单的方法是使用CSS网格框架。 - aloisdg

尝试在包含图像的div上设置宽度和高度，还要在这些div上添加position: relative; 对于img，添加max-width:100%; max-height:100% - Aleks G

@Sumit，我不明白你想要实现什么？你写道图像的高度为491px。但在你发布的代码中，你只有488px，而188px + 288px = 476px！所以你可能应该先修正一下你的数学问题。此外，你的代码看起来有点像“Divitis”，过于复杂了。当我理解你的目标后，我会发布一个替代方案。 - Netsurfer

根据你的布局，这是不可能的。只有在切割图像的部分时才能实现。这是因为如果保持宽高比，较小的图像会更窄。 - yunzen

@HerrSerker 很好的观点！我仍然不明白OP想要实现什么？而且我仍然有一种思维错误的印象... - Netsurfer

Answer 1

为了给出正确定义的答案，我首先要澄清要求：

1. 所有图片具有相同的宽高比：3/2
2. 不裁剪图像
3. 图片之间无空隙
4. 制作一张图片拼贴

您有成千上万的可能性来展示您的图片。我将制作一个简单的布局，这应该能为您展示构建您自己的图片拼贴的方法。

这是一个精美的代码片段，您可以实现以下效果，这是它的外观：

代码：

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像素，以便更容易进行计算）：

1. 大尺寸：328*492px
2. 中等尺寸，即大尺寸的一半：164*246px
3. 小尺寸，即大尺寸的四分之一：82*123px

其次：由于你的所有图片都是竖向（肖像）的，并且容器的高度与大尺寸图片相同，因此您需要使用高度为492像素的列，这些列可以具有以下三个宽度：

1. 大尺寸：328px宽，可以显示所有尺寸的图片
2. 中等尺寸：328/2 = 164px宽，可以显示中等和小尺寸的图片
3. 小尺寸：327/4 = 82px宽，只能显示小尺寸的图片

最后：你需要根据你想要展示的图片总数和容器的总宽度来自行决定使用多少列和什么图片尺寸。但是在你的示例中，容器（._pictures1）具有宽度为935px，这将无法通过刚刚选择的列宽实现。

935/82 = 11.4024...

你可以得到的最接近的容器宽度是82*12 = 984px。

你要么改变容器的宽度，要么改变图像和列的大小来适应你的初始宽度。

---

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

正如你肯定很好奇并想要查看它一样，在这里有一个示例布局：

响应式图像拼贴小样

代码片段：

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中查看结果。

这种布局是基于浮动的，因此我们需要定义容器、列、图像的宽度、高度，使它们可以很好地并排放置（由于我们已经进行了计算和设计，所以这很容易实现）。

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>

- web-tiki

---

恭喜！这是对原帖作者预期目标的第一个真正回答！也许考虑将float替换为display: table[-cell]或display: inline-block会更好，但无论如何我会给你点赞！ - Netsurfer

@Netsurfer 感谢您的评论：）。我考虑过那些替代方案，但我认为浮点数更适合 OP 的情况，因为 display:inline-block; 会创建空白来处理，而 display:table-cell; 不如浮点数跨浏览器。 - web-tiki

遗憾的是，lorempixum.com网站已经歇业了，这会影响到这些小测试。有没有人愿意来修复一下？ - Jeff Axelrod

@JeffAxelrod 我更改了占位图像提供程序并添加了代码片段 ;) - web-tiki

Answer 2

如果只设置其中一维度而不是两个，图像应该可以流畅调整大小。尝试将宽度仅设置为百分比单位。

- tuespetre

Answer 3

首先，要移除图像间的空白，只需将padding和margin设置为'0'。

然后，为了实现您想要的效果，可以使用或组合以下策略：

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

2）您可以通过JavaScript计算所需的大小并动态地分配值。例如，使用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进行调整（w3c文档）

- MrPk

Answer 4

我希望提供一个简单的解决方案。

您可以简单地用DIV包装标签。并且您应该将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 中的图像都将具有适当的纵横比。

- Kushal Jayswal

Answer 5

绝对定位似乎不是最佳选择，如果您想动态保持相同的位置和比例。通常使用本机HTML流。绝对定位就像维生素片。当需要时使用它，但它不是您的主要食物。;) 我会这样做：

1. 简单地将容器定位为所需位置（例如居中），并使用窗口/所在部分的百分比调整其宽度。 2. 然后将._pictures1-xx divs放入其中，并使用容器的百分比调整图片的宽度。高度将自动保持比例(*) 3. 然后我会使._pictures1-xx divs显示"inline-block"并浮动"left"。然后在最后一张图片后加一个清除"both"的小div并关闭容器。

(*) 提醒：默认情况下，宽度或高度的值为“auto”，表示当另一个值为px /％时，保持图像比例的任何尺寸。如果定义了图片的高度，则水平边距本地变为动态，以保持图片的比例。如果定义了宽度并将高度保留为自动，则高度是动态的，以保持图片的比例，而边距不会改变。

我希望这对您有所帮助。

- Alice Rocheman

Answer 6

尝试像这样做：

样式化

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>

- Chintan Bhatt

Answer 7

img{
 height: auto;
 width: 50%
}

- somethinghereplease1

Answer 8

aspectRatioResizeImg
这是一个jQuery插件，允许调整图像大小并保持其纵横比，适应容器。可选地，容器可以调整大小以匹配图像纵横比。
https://github.com/stereoactivo/jquery.resize-image-aspect-ratio

- Amin Arab

Answer 9

用 div 包裹您的图像。 根据比例设置 div 的宽度和高度。 仅为图像提供高度。 如果您希望图像仅占用所需的空间，请使用 display:inline。

- Asghar C

Answer 10

根据我的经验：如果你只设置图片的高度或宽度（而不是两者都设置），那么图片会相应地进行缩放。

- M. R. Wilson