Показать сообщение отдельно
  #1 (permalink)  
Старый 17.01.2022, 13:28
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Запутался я с флексами... Помогите с версткой!
Есть контейнер определенного размера.
В нем может быть 1, 2 или 3 картинки произвольного размера, расположенные по вертикали.
Надо загнать их в контейнер так, что бы они не высовывались, ширина была по ширине контейнера, а высоты пропорционально изменялись.
Вот мучаюсь с флексами, но ничего не получается
<style>
.contv {
	margin: 40px 20px;
	border: 3px red solid;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	height: 180px;
	width: 100px;
}
img {
	object-fit: contain;
	flex-shrink: 1;
}
</style>

<body>

<div class="contv">
	<img src='https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg'>
	<img src='https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-1-1-650x488.jpg'>
	<img src='https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-6-650x390.jpg'>
</div>

</body>

Последний раз редактировалось voraa, 17.01.2022 в 13:36.
Ответить с цитированием