Question

我有一个容器，里面有几张图片。我想要

1。）当只有一个图像时，图像占据整个空间：

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

B）当有两个图像时

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

C）如果有3或4张图像，则保留在同一行

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

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

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

是否可以在css没有js的情况下执行此操作？

是否有任何lib可以做到这一点？

Answer 1

这可以使用flexbox：

来实现

将display: flex;和flex-wrap: wrap;添加到包含img的元素中。 display: flex;告诉子元素使用flexbox模型。 flex-wrap: wrap;允许元素换行到新行。
将flex: 1 0 25%;（flex-grow的简写，flex-shrink和flex-basis）添加到图片img中。 flex-grow告诉元素，如果需要它可以增长，flex-shrink它可以缩小。 flex-basis是元素的默认宽度，在这种情况下为25%，因为您希望连续4 img。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

是的，可以用css做。你也不需要图书馆。 CSS Flexbox Layout技术对此非常理想。

来自CSS技巧

Flexbox布局（灵活盒子）模块（目前是W3C最后调用工作草案）旨在提供一种更有效的方式来布置，对齐和分配容器中的项目之间的空间，即使它们的大小未知和/或动态（因此单词＆＃34; flex＆＃34;）。

有关详情，请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

Answer 3

您需要添加javaScript

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

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

的JavaScript

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

});

Answer 4

所以我建议你先为这些图像创建一个特殊的类。动态影像可能吗？

.dynamicImages{
     //apply style you want here
}

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

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

现在，如果要从数据库中获取图像，可以使用while循环遍历图像。如果您自己创建图像而不从数据库中获取图像，则可能需要在其中创建包含dynamicImages类的图像标记

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

现在使用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");
 }

Answer 5

不使用任何Javascript并避免担心cross-browser compatibility

您需要做的是基于:nth-child和:nth-last-child之间的关系。正如您在下面的代码中看到的那样，总规则的数量是O（N），每个规则中的选择器数量也是O（N）。

但是，你真正想要的只是定位第一个元素。其他人可以只用兄弟选择器作为目标。

/* 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%;
}

继续播放我为您制作的plunker中的图片数量

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

5 个答案: