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

[Anonymous]

Я хочу отображать фотографию под текстом. Я хочу, чтобы фотография была центрирована по горизонтали и уменьшалась по мере необходимости, чтобы соответствовать оставшемуся прямоугольному пространству между концом текста и нижним краем окна браузера. Он не должен превышать 100% от первоначального размера, если места более чем достаточно. Никогда не должно быть необходимости в появлении полос прокрутки.
Вот демо. На что следует обратить внимание:

• Стиль html всегда равен пространству внутри окна. Это пространство, за которое я не хочу выходить.
• Я установил для поля тела нулевое значение, чтобы оно накладывалось на пространство HTML (в противном случае поле по умолчанию сместит тело вниз и вправо, выходя за пределы области HTML и активируя полосы прокрутки).
• Я определяю div (.outer-div ) внутри и накладывается на тело. Это дает мне контейнер, который гарантированно не будет иметь стилей пользовательского агента. Я восстанавливаю поле для левой и правой стороны, заставляя его симметрично сужаться внутри тела. Я определяю его с помощью display: flex и flex-flow: columns, потому что кто-то сказал:-)
• Я создаю гибкий элемент , .inner-fixed-div, чтобы содержать текст вверху страницы.
• Я создаю еще один гибкий элемент, .inner-remaining-div, чтобы занять неиспользуемое прямоугольное пространство ниже текст. Это контейнер, в который должно поместиться изображение. Для него установлено значение flex-grow: 1, как и в гибком решении, которое я пытался применить.
• Я создаю контейнер для изображения, .picture-div . display: inline-block заставляет его реагировать на text-align: center контейнера.
  Наконец, img имеет стиль width: 100% и height: auto, который, как я понял, масштабирует изображение в соответствии с его контейнером, сохраняя соотношение сторон.

Большинство повторяющихся вопросов, предложенных Мастером, были связаны с лишним пустым пространством внизу страницы. Этот ответ основывался на магических числах; то есть размеры пикселей различных компонентов страницы. Мне не нужно решение, которое должно знать абсолютный размер чего-либо — должен быть самоподдерживающийся способ сделать это.
Обратите внимание, что использование изображения размером 600x400 пикселей в демо-версии произвольно. Фактическое изображение, выбранное сценарием CGI, записывающим HTML, будет варьироваться по размеру от меньшего, чем доступное пространство (в этом случае его не следует увеличивать), до большего, чем доступное пространство (в этом случае его следует сжать до плотно помещаются в доступное пространство).

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

/* The outlines are all "inside-outlines": their negative offset makes
their *outer* edges trace the container. This is done because
otherwise the outline of the outermost container, HTML, would not
be visible on the north and west sides of the window */

html {
height: 100%;
width: 100%;
/* Outline shows that "html" always exactly fits the window */
outline: 6px dashed black;
outline-offset: -6px;
}

body {
margin: 0;
/* prevent body from displacing to the southeast */
height: 100%;
/* body should perfectly superimpose the html */
width: 100%;
outline: 4px dashed red;
outline-offset: -4px;
}

.outer-div {
display: flex;
flex-flow: column;
height: 100%;
/* Now create left/right margins */
margin: 0 0.5em;
}

.inner-fixed-div {
outline: 4px dotted blue;
outline-offset: -2px;
}

.inner-remaining-div {
text-align: center;
flex-grow: 1;
}

.picture-div {
outline: 4px dashed fuchsia;
outline-offset: -4px;
/* Enable to respond to parent's text-align */
display: inline-block;
}

.picture-div-img {
outline: 4px dashed purple;
outline-offset: -4px;
width: 100%;
height: auto;
}

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

Static portion

Lorem ipsum odor amet, consectetuer adipiscing elit.  Per dignissim arcu imperdiet accumsan suscipit. Nisl donec ultrices dui fames dapibus neque sollicitudin vitae. Ut parturient elementum cursus sodales sem sed praesent parturient. Rutrum ultricies erat
finibus taciti ante feugiat dictumst dictum. Imperdiet lobortis penatibus non imperdiet ridiculus ac gravida. Platea lobortis tempor tempus lacus dui felis.

Remaining space will contain a photo, scaled down to fit if necessary


The remaining space should be precisely bounded by the HTML container (the thick dashed black outline). The photo should be centered, should scale dynamically while maintaining aspect as the window dimensions are changed. [i]There should be no need for
scrollbars.[/i]


[img]https://placehold.co/600x400?text=600+x+400\npx[/img]

Подробнее здесь: https://stackoverflow.com/questions/789 ... f-web-page