Как масштабировать и сгруппировать картинки в одном блоке?
Как сделать автомасштабируемый блок картинок (от 1 до 4)? То есть, если картинка одна, то она с параметрамиwidth:100% Если две, то 50%, а если три, то отображение как в твитере: Одна width:50%; height:100% и две рядом с параметрами %50 на 50% Если 4 картинки, то показать два ряда по две 50% и 50%
Дополнительно:
Ответы:
Попробуй https://www.npmjs.com/package/photo-partition
- Это не совсем то, что мне нужно... @media и метод построения collumn не подходят для этой задачи. В условии, картинка может быть одна, две, три или четыре. Когда картинка одна, то это 1 колонка (в случае с Bootstrap - это блок <div class="row"><div class="col-**-12"> Когда две картинки - 2 колонки. А когда 3 - это 2 колонки, и одна делится на 2. То есть средствами одного лишь CSS, получается задача не решаема...
- может типа того?
если маркап такой
<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>
<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%; }
/* 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%; }
- artdeco, у меня пока что не получается... Вернусь к оформлению картинок позже.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для масштабирования и группировки картинок в одном блоке можно использовать HTML и CSS. Вот пример кода:
```html
.img-container {
display: flex;
justify-content: center;
align-items: center;
}
.img-container img {
max-width: 100%;
margin: 10px;
}
```
В данном примере мы создаем контейнер с классом `.img-container`, который использует flexbox для выравнивания картинок по центру горизонтально. Картинки внутри контейнера будут иметь максимальную ширину 100% от родительского контейнера и отступы по 10px.
Вы можете добавлять больше картинок в этот контейнер, и они будут автоматически выравниваться и масштабироваться в соответствии с вашими стилями CSS.
Таким образом, вы можете легко масштабировать и группировать картинки в одном блоке, используя HTML и CSS.