CSS Flex - растяжение или уменьшение изображения, чтобы заполнить оставшееся вертикальное пространство, но не ввести про ⇐ CSS

[Anonymous]

Я понимаю, что есть и другие подобные вопросы звука, но я не мог найти ни одного, чтобы помочь мне решить эту проблему. разрешено выращивать или сокращаться, чтобы заполнить доступное пространство.
Изображение составляет 50% от ширины просмотра и находится рядом с некоторым текстовым содержанием. Вертикальное пространство в видимом просмотре. Если изображение не может быть сделано достаточно высоким, чтобы заполнить оставшееся пространство, то раздел, в котором находится изображение, должно быть по крайней мере. В приведенном ниже примере этот раздел имеет фон Chartreuse. < /Li>
Изображение не должно расти так много, что вызывает прокрутку. Чтобы сделать так, чтобы раздел изображения (и само изображение) масштабируется, чтобы заполнить любое дополнительное вертикальное пространство, чтобы в виде просмотра не было пустого пробела. Scrolling should only happen if the image cannot be made any smaller and the image plus the rest of the content is taller than the viewport.



Desired outcome
Actual outcome

< /thead>


Это желаемый результат. Синие секции представляют собой разделы контента, которые не должны сокращаться или расширяться, и они верны на обеих этих картинках. Единственный раздел, который должен расширить или сокращаться, - это изображение (фоновый раздел Chartreuse). И этот раздел должен изменить размер изображения в нем так, что он, по крайней мере, такой же высокий, как содержание справа, но не выше, чем то, что вызовет прокрутку. Таким образом, в этом случае раздел имеет размеры до минимального размера, где изображение имеет такую ​​же высоту, что и содержание в строке. На этом изображении синие секции являются правильным размером, но изображение не изменяет размер вертикально. Он остается той высотой, которой он является, и когда окно изменяется, контент начинает прокручивать вместо изображения, измененное, как в желаемом изображении результата. На этом изображении, вместо переполнения и введения прокрутки, браузер должен был сократить изображение, пропорционально вниз, как это необходимо, до тех пор, пока он не станет такой же высотой, как и содержание в ряду, и затем содержание должно переполнить, а браузер не должен начать прокручивать. < /Td>
< /tr>









< /table> < /div>
Вот GIF, показывающий, что происходит. Я извиняюсь за быструю анимацию цикла. Это элементы .inner , которые не имеют гибкого класса. Подход только к CSS? Я не могу получить изображение для изменения размера при изменении размера порта просмотра. Пожалуйста, смотрите jsfiddle для лучшего примера - https://jsfiddle.net/nt0785p3/.
Идея с этим состоит в том, что изображение должно быть таким же коротким, как текст рядом с ним, пока окно браузера не станет достаточно высокой, чтобы показать все разделы без прокрутки. После того, как окно браузера будет выше, чем все секции, изображение должно запустить вертикально (пропорционально), пока оно не сможет не стать выше (не становясь шире, чем 50% видовой точки). В этот момент зеленый фон, стоящий за разделом изображения, должен просто заполнить оставшееся вертикальное пространство.

Код: Выделить всё

  .outer {
border: 1px solid black;
height: 70vh;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
}

.inner.flexible {
flex: 1;
border: 1px dashed blue;
}

.inner {
padding: 8px;
border: 1px solid blue;
background-color: lightblue;
}

.inner.image-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
border: 1px solid orange;
background-color: chartreuse;
}

.inner.image-container > .image img {
max-width: 100%;
max-height: 100%;
min-width: 0;
min-height: 0;
object-fit: contain;
}

.inner.image-container > .content {
width: 50%;
}< /code>


The first section 1
The first section 2

The second section 1
The second section 2


[img]https://m.media-amazon.com/images/I/71QHUI7yiUL._AC_SX679_.jpg[/img]

Descriptive content goes here
The image should not shrink shorter than this
But the image might be taller than this if there is extra vertical space in the viewport.
Basically, the image should be at least as tall as this text but not so large that it causes scrolling. It should shrink, if necessary, to reduce the need for scrolling.


The third section
The fourth section
The fifth section
The sixth section
The seventh section

Подробнее здесь: https://stackoverflow.com/questions/796 ... t-not-intr