Показать сообщение отдельно
  #8 (permalink)  
Старый 03.02.2022, 01:20
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от voraa
В нем может быть 1, 2 или 3 картинки произвольного размера, расположенные по вертикали.
Надо загнать их в контейнер так, что бы они не высовывались, ширина была по ширине контейнера, а высоты пропорционально изменялись.
Если в прямоугольник размером 180×100 попытаться вписать прямоугольник размером 800×100 так, чтобы их высоты совпадали, то «боковые части» так и так будут «высовываться» — придётся их обрезать.

Сообщение от Aetae
Боюсь для произвольного размера изображения, не прописанного в коде заранее, так не сделать.
В чём тогда смысл display: flex;? Или вам запрещено его использование?

Сообщение от voraa
Ну ширина может и меньше быть.
Главное по высоте пропорционально.
Растянуто пропорционально высоте картин (и как следствие какая-либо из картин может быть больше ширины контейнера, в данном случае вылезшие картины обрезаются, но зато сохраняются точные пропорций высот). Показано действие кода при разном кол-ве элементов.

<style>
body { display: flex; } /* только для примера */
.contv {
	margin: 40px 20px;
	border: 3px red solid;
	height: 180px;
	width: 100px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	align-items: center;
	gap: 3px;
}
.contv > img {
	min-height: 0;
}
</style>
<div class="contv">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
</div>
<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">
</div>
<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>


Растянуто пропорционально высоте картин, которые были предварительно отмасштабированы до такого размера, чтобы влезать в контейнер. Пропорции высот картин не влезших в контейнер уменьшены во столько раз, во сколько раз больше картина оказалась больше контейнера. Картинки видны не полностью! Показано действие кода при разном кол-ве элементов.

<style>
body { display: flex; } /* только для примера */
.contv {
	margin: 40px 20px;
	border: 3px red solid;
	height: 180px;
	width: 100px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	align-items: stretch;
	gap: 3px;
}
.contv > img {
	min-height: 0;
	object-fit: cover;
}
.contv > img:only-child {
	height: 100%;
}
</style>
<div class="contv">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
</div>
<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">
</div>
<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>



Сообщение от voraa
Там не известно, сколько их будет. Поэтому сразу в стилях не пропишешь высоту в 100%, 50% или 33%. Поэтому даже одинаковой высоты непросто сделать.
Равномерное распределение высот, в зависимости от кол-ва элементов.
<style>
body { display: flex; } /* только для примера */
.contv {
	margin: 40px 20px;
	border: 3px red solid;
	height: 180px;
	width: 100px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.contv > img {
	min-height: 0;
	flex: 0 1 100%;
	object-fit: cover;
}
</style>
<div class="contv">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
</div>
<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">
</div>
<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>


Можно также сразу в стилях прописать высоту в 100%, 50% или 33%... (Не рекомендуется — больше элементов требует больше CSS-кода)
<style>
body { display: flex; } /* только для примера */
.contv {
	margin: 40px 20px;
	border: 3px red solid;
	height: 180px;
	width: 100px;
	display: block;
}
.contv > img {
	max-width: 100%;
	margin: auto;
	display: block;
	object-fit: cover;
}
.contv > img:only-child {
	height: 100%;
}
.contv > img:nth-last-child(2):first-child,
.contv > img:nth-last-child(2):first-child + * {
	height: 50%;
}
.contv > img:nth-last-child(3):first-child,
.contv > img:nth-last-child(3):first-child + * {
	height: 33.3333%;
}
</style>
<div class="contv">
	<img src="https://proprikol.ru/wp-content/uploads/2019/10/kroliki-krasivye-kartinki-2.jpg">
</div>
<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">
</div>
<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>
Ответить с цитированием