|
Сообщение от 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>