Geek Answers Handbook

How to make the image automatically fit the maximum container size?

I have a container that will have multiple images. I want to

1.), when there is only one image, the image takes up all the space:

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

B) when there are two images

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

C) If there are 3 or 4 images, stay on the same line

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

D) When there are 5 images, the first line will have two lines, 4 images in the first line and 1 image in the second line.

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

Is it possible to do this csswithout js?

And are there any libs that can do this?

+4
source share
5 answers

This can be achieved with flexbox:

  • display: flex; flex-wrap: wrap; , img 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 .

.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>
Hide result
+3

, CSS. . CSS Flexbox Layout .

CSS-

Flexbox Layout ( ) ( W3C Last Call Working Draft) , , / ( , "flex" ).

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

0

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) + "%")
    }

});
0

. 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");
 }
0

- 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

0

More articles:


All Articles