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

Question

我有一个容器会有几个图像。我想

1）当仅存在一个图像时，图像取整个空间：

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

B）当有两个图像

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

C）如果有3个或4个图像时，保持在同一行

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

d）当有5张图像，将有两行，在第一行和1个IMAG 4个图像e在第二行。

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

是否有可能做到这一点在css没有js？

有没有任何库可以做到这一点？

Answer 1

这可以使用flexbox实现：

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

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

Answer 2

是的，它只是可以做的CSS。你也不需要一个库。 CSS Flexbox布局技术对此非常理想。

从CSS技巧

的Flexbox的布局（软盒）模块（目前是W3C最后呼叫工作草案）旨在提供一个更有效的方式来布置，调整和项目之间分配空间在容器中，即使它们的尺寸未知和/或动态（因此也就是“flex”）。

请参阅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可能？

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

来吧，与我为你