如何使图像自动适应容器的最大尺寸?

I have a container which would have several images. I want

我有一个容器，它有几个图像。我想要的

1.) when there is only one image, the image take whole space:

1)当只有一个图像时，图像占据整个空间:

 ------------------Container----------------
 | --------------------------------------- |
 | |                                     | |
 | |                                     | |
 | |           Image                     | |
 | |                                     | |
 | |                                     | |
 | --------------------------------------- |
 -------------------------------------------

B) when there are two images

B)当有两个图像时

 ------------------Container----------------
 | -------------------- ------------------ |
 | |                  | |                | |
 | |                  | |                | |
 | |     Image 1      | |     Image 2    | |
 | |                  | |                | |
 | |                  | |                | |
 | -------------------- ------------------ |
 -------------------------------------------

C) If there are 3 or 4 images, remain in same row

C)如果有3或4张图片，保持同一行

 ------------------Container----------------
 | --------- --------- --------- --------- |
 | |       | |       | |       | |       | |
 | |       | |       | |       | |       | |
 | |       | |       | |       | |       | |
 | |       | |       | |       | |       | |
 | |       | |       | |       | |       | |
 | --------- --------- --------- --------- |
 -------------------------------------------

D) When there are 5 images, there will be two rows, 4 images in first row and 1 image in second row.

D)当有5个图像时，将有两行，第一行4个图像，第二行1个图像。

 ------------------Container----------------
 | --------- --------- --------- --------- |
 | |       | |       | |       | |       | |
 | |       | |       | |       | |       | |
 | |       | |       | |       | |       | |
 | |       | |       | |       | |       | |
 | |       | |       | |       | |       | |
 | --------- --------- --------- --------- |
 | ---------                               |
 | |       |                               |
 | |       |                               |
 | |       |                               |
 | |       |                               |
 | |       |                               |
 | --------- --------- --------- --------- |
 -------------------------------------------

Is it possible do it in css without js?

有没有可能在css中不使用js?

And is there any libs can do that?

有什么谎言可以做到这一点吗?

5 个解决方案

#1

This can be achieved using flexbox:

这可以通过flexbox实现:

• Add display: flex; and flex-wrap: wrap; to the element containing the imgs. display: flex; tells the elements children to use the flexbox model. flex-wrap: wrap; allows for the elements to wrap onto new lines.
• 添加显示:flex;和flex-wrap:包装;到包含img的元素。显示:flex;告诉元素子元素使用flexbox模型。flex-wrap:包装;允许元素封装到新的行上。
• Add flex: 1 0 25%; (shorthand for flex-grow, flex-shrink and flex-basis) to the images imgs. flex-grow tells the element that it can grow if need be, flex-shrink that it can shrink. flex-basis is the default width of the element, 25% in this case as you want 4 imgs in a row.
• 添加flex: 1025%;(快速增长，弹性收缩和弹性基础)的图像imgs。flex-grow告诉元素，如果需要，它可以生长，收缩，它可以收缩。浮动基是元素的默认宽度，在本例中为25%，因为您希望一行中有4个img。

.container {
    display: flex;
    flex-wrap: wrap;
    height: 200px;
    width: 100%;
}
.container img {
    flex: 1 0 25%;
}

<strong>1</strong>
<div class="container">
    <img alt="" src="http://placehold.it/300x300" />
</div>
<strong>2</strong>
<div class="container">
    <img alt="" src="http://placehold.it/300x300" />
    <img alt="" src="http://placehold.it/300x300" />
</div>
<strong>3</strong>
<div class="container">
    <img alt="" src="http://placehold.it/300x300" />
    <img alt="" src="http://placehold.it/300x300" />
    <img alt="" src="http://placehold.it/300x300" />
</div>
<strong>4</strong>
<div class="container">
    <img alt="" src="http://placehold.it/300x300" />
    <img alt="" src="http://placehold.it/300x300" />
    <img alt="" src="http://placehold.it/300x300" />
    <img alt="" src="http://placehold.it/300x300" />
</div>
<strong>5</strong>
<div class="container">
    <img alt="" src="http://placehold.it/300x300" />
    <img alt="" src="http://placehold.it/300x300" />
    <img alt="" src="http://placehold.it/300x300" />
    <img alt="" src="http://placehold.it/300x300" />
    <img alt="" src="http://placehold.it/300x300" />
</div>

#2

Yes it's possible to do with just css. You don't need a library either. The CSS Flexbox Layout technique would be ideal for this.

是的，仅仅使用css是可能的。你也不需要图书馆。CSS Flexbox布局技术将是理想的。

From CSS Tricks

从CSS技巧

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

Flexbox布局(灵活的Box)模块(目前是W3C的最后调用工作草案)旨在提供一种更有效的方式来布局、排列和分配容器中的项目，即使它们的大小是未知的和/或动态的(因此“flex”一词)。

See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more.

见https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

#3

You need to add javaScript

您需要添加javaScript

HTML

HTML

<div class "container">
    <img class="showBigImage" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
    <img class="showBigImage" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
    <img class="showBigImage" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />

CSS

CSS

.container {
    width:100%
}
.showBigImage {
    padding:0;
    margin:0;
    display:block;
    float:left
}

JavaScript

JavaScript

$(document).ready(function () {
    var totalImg = $(".showBigImage").length;
    if(totalImg > 4){
       $(".showBigImage").css("width", "25%")
    }else{
         $(".showBigImage").css("width", (100 / totalImg) + "%")
    }

});

#4

So I will advise first you create a special class for those images. dynamicImages maybe?

我建议你首先为这些图像创建一个特殊的类。动态图像可能吗?

.dynamicImages{
     //apply style you want here
}

Then once you have this, you can also create a container div:

一旦你有了这个，你也可以创建一个容器div:

<div class="container">
    <div class="row dynamicImages"></div>
</di>

Now If you are getting your images from a database you can use a while loop to loop through the images. If you creating the images yourself without taking them from the database, you might want to create the image tag with the dynamicImages class in them

现在，如果您正在从数据库中获取图像，您可以使用while循环对图像进行循环。如果您自己创建图像而不从数据库中获取它们，您可能想要创建带有dynamicImages类的图像标记

<div class="row dynamicImages">
    <img class="img-responsive" src="#">
    <img class="img-responsive" src="#">
    <img class="img-responsive" src="#">
<div>

Now using js you check for the number of images you have:

现在使用js检查图像的数量:

if($("#dynamicImages > img").length == 1){

       //col-sm-12 allows you to occupy the whole row
       $("#dynamicImages > img").addClass("col-sm-12");

 }else if($("#dynamicImages > img").length == 2){
       //the col-sm-6 allows two per row. 
       $("#dynamicImages > img").addClass("col-sm-6");
 }else if($("#dynamicImages > img").length >= 3 ){
       //the col-sm-3 allows 4 per row in bootstrap 
       $("#dynamicImages > img").addClass("col-sm-3");
 }

#5

Without using any bit of Javascript and avoid worrying about cross-browser compatibility

What you have to do is based on the relationship between :nth-child and :nth-last-child. As you can see in the below code, the number of total rules is O(N) and the number of selectors in every rule is also O(N).

不使用任何Javascript和避免担心跨浏览器兼容性，您所要做的是基于:nth-child和:nth-last-child之间的关系。正如您在下面的代码中看到的，总规则的数量是O(N)，每个规则中选择器的数量也是O(N)。

However, what you really want, is to just target the first element. The others can be targeted with just a sibling selector.

但是，您真正想要的是，只针对第一个元素。其他的可以只针对一个兄弟选择器。

/* one item */
img:first-child:nth-last-child(1) {
    width: 100%;
}

/* two items */
img:first-child:nth-last-child(2),
img:first-child:nth-last-child(2) ~ img {
    width: 50%;
}

/* three items */
img:first-child:nth-last-child(3),
img:first-child:nth-last-child(3) ~ img {
    width: 33.3333%;
}

/* four items */
img:first-child:nth-last-child(4),
img:first-child:nth-last-child(4) ~ img {
    width: 25%;
}

/* This one resets the sizes when you get over 4 images */
.content > img {
  width: 25%;
}

Go ahead and play with the number of images in this plunker I've made for you

继续玩我为你做的这个柱塞里的图片