Как сделать изображение максимально подходящим для максимального размера контейнера?

Question

У меня есть контейнер, который будет иметь несколько изображений. Я хочу

1.), когда есть только один образ, изображение займет все пространство:

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

B), когда два изображения

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

C) Если есть 3 или 4 изображений, остаются в том же строке

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

D) при наличии 5 изображений, будет два ряда, 4 изображения в первой строке и 1 IMAG е во второй строке.

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

Можно ли это сделать в css без js?

И есть ли какие-либо библиотеки могут это сделать?

Answer 1

Это может быть достигнуто с помощью flexbox:

• Добавить display: flex; и flex-wrap: wrap; к элементу, содержащему img с. display: flex; рассказывает элементам, что дети используют модель flexbox. flex-wrap: wrap; позволяет элементам обтекать новые строки.
• Add 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 Layout была бы идеальной для этого.

От CSS Tricks

Flexbox Layout (Flexible Box) модуль (в настоящее время W3C Last Call Рабочий проект) направлен на обеспечение более эффективного способа раскладывать, выровнять и распределить пространство между статьями в контейнере, даже если их размер неизвестен и/или динамичен (таким образом, слово «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> 

Теперь Если вы получаете ваши изображения из базы данных можно использовать в то время цикла для перебора изображений.Если создавать изображения самостоятельно, не принимая их из базы данных, вы можете создать тег изображения с классом 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 я сделал для вас