@Thuban

Карусель изображений Fotorama выходит за границу flex-блока, как исправить?

Имеется div с параметром display: flex, внутри 3 одинаковых по ширине блока с параметрами flex: 1 1 0 (для того, чтобы они были равного размера), если внутри каждого из flex-блоков вставить изображения с параметром width: 100%, то блоки остаются одинакового размера, несмотря на то, какие изображения используются, а если вставить в эти блоки fotorama-карусель, то размеры flex-блоков сбиваются и они выходят за пределы родительского. Как можно выравнять эту карусель?5d24a9201e239400202658.png
  • Вопрос задан
  • 33 просмотра
Пригласить эксперта
Ответы на вопрос 2
Mesuti
@Mesuti
Senior HTML developer (c)
Есть пример кода?

Попробуйте
.gallery_group {
width: 100%
}
Ответ написан
@Thuban Автор вопроса
В gallery_group нельзя ставить width: 100%, т.к. это flex-блок и он займет весь родительский элемент, там уже прописано flex: 1 1 0 для равного размера
Пример HTML
<div class="gallery">
					<div class="gallery_group">
						<div class="fotorama" data-fit="cover" data-nav="thumbs" data-loop="true" 
						data-maxwidth="100%" data-maxheight="300px" data-flexible="true">
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						</div>
					</div>
					
					<div class="gallery_group">
						<div class="fotorama" data-fit="cover" data-nav="thumbs" data-loop="true" 
						data-maxwidth="100%" data-maxheight="300px" data-flexible="true">
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						</div>
					</div>
					
					<div class="gallery_group">
						<div class="fotorama" data-fit="cover" data-nav="thumbs" data-loop="true" 
						data-maxwidth="100%" data-maxheight="300px" data-flexible="true">
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						  <img src="http://placehold.it/400x400"/>
						</div>
					</div>


Пример CSS
.gallery {
	display: flex; 
	max-width: 100%;
	align-items: stretch;
}

.gallery_group {
	flex: 1 1 0;
	padding: 16px;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
16 июл. 2019, в 00:49
15000 руб./за проект
15 июл. 2019, в 23:17
3000 руб./за проект
15 июл. 2019, в 23:03
1000 руб./за проект