Как подстроить изображение под высоту листа при печати?

Question

[Lorem Ipsum]

В общем есть контент и изображение. И это надо отпечатать, но если изображение слишком большое, то оно обрезается разрывом страницы.

Как можно подогнать размер изображения под лист А4, при условии что выше изображения есть контент, который толкает изображение вниз (поместить изображение вверх не предлагать)


UPD. Полагаю, что тут ничего не поделаешь. Я многое перепробовал.
Возможно тут проблема просто в ограниченном функционале браузера и свойств CSS.

Answer 1

[Уалихан Оразбаев]

Используйте для тега img css свойство object-fit

Comments

[Lorem Ipsum]

Все значения попробовал, но не помогло. :(

[Уалихан Оразбаев]

Lorem Ipsum, можете залить на codepen или же подобные ресурсы? Было бы легче вам помочь

[Lorem Ipsum]

Kwinston, залил.

[Уалихан Оразбаев]

Lorem Ipsum, возможно вы забыли указать размеры картинки, вот, держите

[Lorem Ipsum]

Kwinston, Не, одна страница должна быть.

[Уалихан Оразбаев]

Lorem Ipsum, не совсем вас понял

[Lorem Ipsum]

Kwinston, Изображение не должно переносится на другую страницу, оно должно изменятся в размерах, чтобы заполнить одну страницу.

[Уалихан Оразбаев]

Lorem Ipsum, в моей разметке что я скинул выше достаточно просто отредактировать размеры блока imagePrint под нужные вам и вне зависимости от изображения внутри, оно не будет выходить за пределы блока и будет выглядеть корректно

[Lorem Ipsum]

Kwinston, Поставил высоту = 2000px и всё слетело.

[Уалихан Оразбаев]

Lorem Ipsum, залейте куда-либо вашу разметку, я ее исправлю. К сожалению я не могу понять с чем конкретно у вас возникают проблемки

[Lorem Ipsum]

Kwinston, Я же залил её выше. 2000px это я в Вашем JSFiddle устанавливал как Вы и сказали.

[Уалихан Оразбаев]

Lorem Ipsum, исправил. Дело в том что вы сами можете редактировать размеры под нужные вам

[Lorem Ipsum]

Kwinston, всё равно же обрезается если поставить 2000px на 2000px. Я думаю тут мало чего поделаешь, это похоже на ограниченный функционал браузера и свойств CSS.

[Уалихан Оразбаев]

Lorem Ipsum, давайте объясню вам на примере банальной физики. У вас есть коробка 10x10x10 сантиметров, в нее нужно вместить металлический лист длиной и шириной 1 метр. Решением станет либо увеличение объема коробки либо уменьшение размеров листа. Тут тот же принцип, но увеличить лист мы не можем => следовательно необходимо уменьшить размер картинки. Как не крути с текущими размерами она не сможет уместиться на одном листе А4

[Lorem Ipsum]

Kwinston, Вот именно этого я и хотел. Но не понимаю как реализовать именно в контексте печати страницы.

[Уалихан Оразбаев]

Lorem Ipsum, в таком случае это невозможно. Нельзя поместить внутрь то, что больше самой емкости. Я вам посоветовал свойство object-fit чтобы любое изображение адекватно выглядело под заданные вами размеры, ибо если задавать напрямую значения то картинка будет непропорциональна. В любом случае желаю вам удачи в вашей задумке

[Lorem Ipsum]

Kwinston, Спасибо. Я думаю это ограниченный функционал CSS-свойств и возможностей браузера...