文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >图像拼接HTML/CSS

问图像拼接HTML/CSS
EN

Stack Overflow用户
提问于 2014-03-06 10:14:58
回答 10查看 36.1K关注 0票数 21

我想做一个图像布局与肖像图像在一个固定的纵横比为3:2的div。图像的大小是327x491px。

主要问题是图像之间不需要的空间。如何使用/CSS将图像对齐为一个镶嵌的

HTML：

代码语言：javascript
复制
<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：

代码语言：javascript
复制
._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 ... */

小提琴

aspect-ratio
html
css
responsive-design
grid-layout
EN

回答 10

Stack Overflow用户

回答已采纳

发布于 2014-03-14 18:19:14

为了给出一个正确的答案，我首先要澄清这些要求：

  1. 图像都有相同的高宽比: 3/2
  2. 图像不应该被裁剪
  3. 图像之间没有空间
  4. 把图像拼成一幅

你可以有成千上万的可能性来显示你的图像。我要做一个简单的布局，应该告诉你如何建立自己的。

下面是您可以实现的目标的花式小提琴，如下所示：

​

​

代码：

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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 :为了简单起见，假设您的图像可以有3个大小(为了简化计算，我将图像大小更改为1 px )：

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

第二:作为您的图像都是肖像，您的容器具有与大图像相同的高度，您必须使用492 As高列，这些列可以有3个宽度：

  1. 大：328px宽，它们可以显示所有大小的图像
  2. 介质：328/2 = 164px宽，可以显示中小图像。
  3. 小：327/4 = 82px宽，它们只能显示小图像

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

但在您的小提琴，容器(._pictures1)有一个935px宽度，这将是不可能达到的列宽度选择之前。

代码语言：javascript
复制
935/82 = 11.4024...

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

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

或(扰流板)你可以使用百分比，这可以是一个选择，特别是如果你需要你的布局响应，但这可能会变得复杂，我试图使事情变得简单。

因为我确信您很好奇，并且想要检查它，下面是一个示例布局

图像小提琴的响应拼接

代码片段：

​

代码语言：javascript
复制
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%;
}
代码语言：javascript
复制
<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，或任何其他适合你的工具，如果你真的很好，你甚至可以用你的大脑来表达你想要的布局。

我设计了一个图像，你可以在答案的两部分看到。

正如我前面说过的，布局上有很多可能性(列数和这些列中图像的大小)，所以在这个例子中，我选择了两个大列、一个中型和两个小的。

代码语言：javascript
复制
328*2+164+82*2 = 984px ( = width of container so it can fit!)

最后一步:开始编码！

您可以在这里看到结果。

小提琴

这个布局是基于浮子的，所以我们需要在容器的宽度、高度、列、图像中定义，以便它们都能很好地彼此匹配(正如我们已经考虑过的那样，在计算和设计中，这很容易)。

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

票数 36
EN

Stack Overflow用户

发布于 2014-03-13 14:56:14

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

票数 4
EN

Stack Overflow用户

发布于 2014-03-13 15:10:13

首先，要删除图像之间的空间，只需删除设置为'0‘padding和margin。

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

1)将一个固定大小的像素分配给其中一个大小:另一个将自动缩放。

2)您可以通过javascript计算所需的大小，并以第纳尔方式分配值。例如，对于jQuery框架：

代码语言：javascript
复制
$(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背景图像进行div和background-size: cover或background-size: contain (w3c文档 )。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/22221333

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档