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

[Anonymous]

(это похоже на уменьшение изображения, чтобы заполнить оставшееся пространство на странице горизонтально, но вертикально и без гибкого .)
Рассмотрим HTML -страницу, как ниже. Когда это напечатано, каждая статья начинается на новой странице. Чтобы избежать рваного дна, я планирую включить изображение в статью к его концу и хочу, чтобы оно заняло необходимое вертикальное пространство так, чтобы статья заканчивалась понашой с дном страницы. Но я не знаю, что поместить вместо высоты: 100px < /code>. < /P>

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

article {
break-before: page
}

div.image {
height: 100px; /* ??? */
background: url(https://httpbin.org/image/png) center / contain no-repeat;
}< /code>
Welcome to the first issue of this newspaper

Today's featured article: Paged Media in CSS

Paged Media in CSS

Paged media are incredibly useful.


Next issue appears in a week
< /code>
< /div>
< /div>
< /p>
Если я сам разбил страницу, я мог бы поместить каждую страницу в  < /code> и достичь этого, как (разрывы страницы иллюстрируются сплошной линией): < /p>


 Class = "Snippet-Code">
div.title,
div.page {
border-top: solid 1px black;
height: 200px;
display: flex;
flex-direction: column;
}

div.page {
break-before: page;
}

div.page * {
flex: none;
}

div.image {
flex: 1 1 auto;
background: url(https://httpbin.org/image/png) center / contain no-repeat;
}< /code>

Welcome to the first issue of this newspaper

Today's featured article: Paged Media in CSS



Paged Media in CSS

Paged media are incredibly useful.




Next issue appears in a week

< /code>
< /div>
< /div>
< /p>
Но я хочу оставить страницу разрыва до визуализации режима печати. Есть ли правило @page 

для создания страниц с промывки и иметь определенные элементы растягивались или сжимаются по мере необходимости?

Подробнее здесь: https://stackoverflow.com/questions/796 ... inted-html