当前位置：theitroad>马赛克图像 HTML/CSS

马赛克图像 HTML/CSS

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/22221333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 01:08:37 　来源:igfitidea点击:

Mosaic of images HTML/CSS

htmlcssresponsive-designgrid-layoutaspect-ratio

提问by Developer Desk

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

我想使与图像布局肖像图像内的div与固定纵横比3:2。图像的大小是327x491px。

The main issue is unwanted spaces between images. How do I align images as a mosaicusing only HTML/CSS?

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

HTML :

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 :

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

提琴手

回答by web-tiki

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
  1. 图像都具有相同的纵横比：3/2
  2. 图像不应被裁剪
  3. 图像之间没有空格
  4. 制作图像马赛克

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 FIDDLEof what you can achieve and here is what it looks like :

这是您可以实现的幻想，这是它的外观：

Mosaic of images in html/css - example layout

html/css 中的图像马赛克 - 示例布局

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) :

第一：为了简单起见，假设您的图像可以有 3 种尺寸（我将图像尺寸更改了 1 像素以简化计算）：

  1. big : 328*492px
  2. medium, 1/2 of big : 164*246px
  3. small, 1/4 of big : 82*123px
  1. 大 ： 328*492px
  2. 中，大的 1/2 ： 164*246px
  3. 小，大的 1/4 ： 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 :

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

  1. big : 328pxwide, they can display all size images
  2. medium : 328/2 = 164pxwide, they can display medium and small images
  3. small : 327/4 = 82pxwide, they can only display small images
  1. big :328px宽，它们可以显示所有尺寸的图像
  2. medium ：328/2 = 164px宽，它们可以显示中小图像
  3. small ：327/4 = 82px宽，它们只能显示小图像

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 935pxwidth which will be impossible to achieve with the column widths chosen just before.

但是在您的小提琴中，容器 ( ._pictures1) 的935px宽度是之前选择的列宽无法实现的。

935/82 = 11.4024...

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

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

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

响应式马赛克图像

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.

使用钢笔、photoshop 或任何其他适合您的工具，如果您真的很优秀，您甚至可以用您的大脑在精神上代表您想要的布局。

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

我设计了你可以在答案的bigining中看到的图像。

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

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

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 floatsso 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).

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

CSS :

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;
}

Then the HTML markup:

然后是 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>

回答by tuespetre

If you set one dimension or the other, but not both, the images should resize fluidly. Try setting just the width to a percentage unit.

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

回答by MrPk

First of all, to remove space between images, just remove set to '0' paddingand margin.

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

Then to achive what you want, you can use or combine those strategies:

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

1) Assign a fixed size in pixel to one of the sizes: other one will scale automatically.

1) 以像素为单位为其中一个大小分配一个固定大小：另一个将自动缩放。

2) You can calculate the size you need via javascript and assign the value dinamically. For example with jQuery framework:

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) You can use css background-image for divs and background-size: coveror background-size: containas you need, statically or dinamically (w3c docs

3）您可以将 css background-image 用于 div 和/background-size: cover或background-size: contain根据需要，静态或动态地（w3c docs

回答by Alice Rocheman

Absolute positioning doesn't seem to be the best choice if you want to dynamically keep the same positions and ratio.

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

Native HTML flow is usually the way to go.Absolute positioning is like vitamin tablets. You use it when you need it, but it's not your main food. ;)

原生 HTML 流通常是要走的路。绝对定位就像维生素片。您在需要时使用它，但它不是您的主要食物。;)

What I would do is :

我会做的是：

  1. simply position the container as wanted (centered for example) and size its width with percentage of the window/section it's in.

  2. Then you put your ._pictures1-xx divs inside it, and size the pics' width using percentage of the container. Height will keep ratio automatically (*)

  3. I would then make the ._pictures1-xx divs display "inline-block" and float "left". Then a little div with clear"both" after the last pic and close the container.

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

  2. 然后你把你的 ._pictures1-xx div 放在里面，并使用容器的百分比来调整图片的宽度。高度会自动保持比例（*）

  3. 然后我会让 ._pictures1-xx div 显示“inline-block”并浮动“left”。然后在最后一张图片之后加上一个清晰的“both”小 div 并关闭容器。

(*) reminder : the width or height default value is "auto", meaning any size that keeps the image ratio when the other is a px/% value. The horizontal margins natively become dynamic when your pics' height is defined, in order to keep your pics' ratios. If you define width and leave height auto, then the height is dynamic in order to keep the pics' ratio, and margins don't change.

(*) 提醒：宽度或高度的默认值是“自动”，意思是当另一个是 px/% 值时保持图像比例的任何大小。当您的图片高度被定义时，水平边距自然会变得动态，以保持您的图片比例。如果您定义宽度并保留高度自动，则高度是动态的以保持图片的比例，并且边距不会改变。

I hope this was helpful.

我希望这可以帮到你。

回答by Kushal Jayswal

I would like to give simple solution.

我想给出简单的解决方案。

You can simply wrap imgtag with DIV. And you should apply CSS to this wrapped DIV.

您可以简单地img用 DIV包装标签。并且您应该将 CSS 应用于这个包装好的 DIV。

Example Code

示例代码

而不是这个 
<img src='some_image.jpg'>
使用以下结构 
<div class="img_wrapper">
     <img src='some_image.jpg'>
</div>



CSS

CSS

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

All images inside class .img_wrapperwould have proper aspect ratio.

类中的所有图像.img_wrapper都具有适当的纵横比。

回答by M. R. Wilson

In my experience: if you only set the dimension of eitherheight or the width (not both) the image will scale accordingly.

根据我的经验：如果你只设定的尺寸无论是高度还是宽度（不能同时）的图像也会相应扩大。

回答by Amin Arab

aspectRatioResizeImg
This is a jQuery plugin that allows resizing of an image preserving its aspect ratio, fitting a container. Optionally the container can be resized to match the image aspect ratio.
https://github.com/stereoactivo/jquery.resize-image-aspect-ratio

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

回答by somethinghereplease1

img{
 height: auto;
 width: 50%
}

回答by Asghar C

wrap your image with a div. set width and height for the div according to ratio. Give only height for image. If you want the image to take only space they need use display:inline also

用 div 包裹你的图像。根据比例设置 div 的宽度和高度。仅给出图像的高度。如果您希望图像仅占用空间，则还需要使用 display:inline

回答by Chintan Bhatt

Try something like this

尝试这样的事情

Styling

造型

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;
}

This is HTML

这是 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>

相关推荐

Html td 宽度，不起作用？

Html td 宽度，不起作用？

Html 将绝对放在相对定位元素后面

Html 将绝对放在相对定位元素后面

Html SPAN 与 DIV（内联块）

Html SPAN 与 DIV（内联块）

Html 如何更改选择框箭头

Html 如何更改选择框箭头

相关推荐
最近更新
标签