Как масштабировать и сгруппировать картинки в одном блоке?

Question

[My1Name]

Как сделать автомасштабируемый блок картинок (от 1 до 4)? То есть, если картинка одна, то она с параметрамиwidth:100% Если две, то 50%, а если три, то отображение как в твитере: Одна width:50%; height:100% и две рядом с параметрами %50 на 50% Если 4 картинки, то показать два ряда по две 50% и 50%

Answer 1

[artdeco]

Попробуй https://www.npmjs.com/package/photo-partition

Comments

[My1Name]

Это не совсем то, что мне нужно... @media и метод построения collumn не подходят для этой задачи. В условии, картинка может быть одна, две, три или четыре. Когда картинка одна, то это 1 колонка (в случае с Bootstrap - это блок <div class="row"><div class="col-**-12"> Когда две картинки - 2 колонки. А когда 3 - это 2 колонки, и одна делится на 2. То есть средствами одного лишь CSS, получается задача не решаема...

[artdeco]

может типа того?

если маркап такой

<div data-n="1">
 <span data-img style="background-image:url('img.jpg');background-size:cover;" />
</div>
<div data-n="2">
 <span data-img data-1 style="background-image:url('img.jpg');background-size:cover;"  /><
   span data-img data-2  style="background-image:url('img2.jpg');background-size:cover;" />
</div>
<div data-n="3">
 <span class="Tower" data-img data-1 style="background-image:url('img.jpg');background-size:cover;"  /><
  span data-img data-2 style="background-image:url('img2.jpg');background-size:cover;" /><
  span data-img data-3  style="background-image:url('img3.jpg');background-size:cover;"  />
 </div>
<div data-n="4">
 <span data-img data-1 style="background-image:url('img.jpg');background-size:cover;"  /><
  span data-img data-2 style="background-image:url('img2.jpg');background-size:cover;"  /><
  span data-img data-3 style="background-image:url('img3.jpg');background-size:cover;"  /><
  span data-img data-4 style="background-image:url('img4.jpg');background-size:cover;"  />
</div>

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

/* two items */
span:first-child:nth-last-child(2),
spah:first-child:nth-last-child(2) ~ li {
    width: 50%;
    height: 100%;
}

/* three items */
span:first-child:nth-last-child(3),
span:first-child:nth-last-child(3) ~ li {
    width: 50%;
    height: 50%;
}
/* three items - tower */
span.Tower:first-child:nth-last-child(3),
span.Tower:first-child:nth-last-child(3) ~ li {
    width: 50%;
    height:100%;
    float:left;
}

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

[My1Name]

artdeco, у меня пока что не получается... Вернусь к оформлению картинок позже.