Управление размером изображения в полях полей CSS @page ⇐ CSS

[Anonymous]

У меня есть HTML-страница, которую нужно распечатать. Chrome уже давно поддерживает поля полей страницы CSS, поэтому я использую их.

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

@page {
size: a4;
margin-top: 30mm;
margin-bottom: 15mm;
margin-left: 10mm;
margin-right: 10mm;

@top-left {
content: url("/images/300x50.png");
background-color: thistle;
}

@top-center {
content: "";
background-color: red;
}

@top-right {
content: "First line of text in the header\A Second line of text in the header\A Third line of text in the header";
white-space: pre;
background-color: yellow;
}
}



Document content starts here

В левом верхнем углу мне нужно изображение логотипа, но на данный момент это может быть одно из примерно дюжины различных изображений всех форм и размеров, с возможностью регулярного добавления новых, поэтому мне нужно решение, которое работает независимо от размеров/соотношения сторон изображения логотипа.
(Свойства фона-цвета нужны только для того, чтобы во время тестирования было легче увидеть, где находятся поля полей; они не будут там, в готовом документе.)
При изображении 300 x 50 я получаю это, и это удовлетворительно.


Мне не нужно поле @top-left когда-либо занимать более половины страницы, поэтому я включил пустое поле @top-center.
Но с изображением 600 x 100 я получаю это


И с изображением 300 x 200 я получаю это


Если изображение больше, чем поле поля, я хочу сжать его, чтобы оно поместилось в поле (конечно, сохраняя то же соотношение сторон). В идеале мне бы хотелось иметь небольшое количество отступов сверху и снизу поля, чтобы максимальная высота изображения составляла, скажем, 90% высоты поля поля. Я не против того, чтобы изображение доходило до самых краев слева и справа от коробки. Я пробовал отступы, поля, максимальную высоту, максимальную ширину и соответствие объекта, и все они, похоже, применимы к самому блоку, а не к изображению.

Подробнее здесь: https://stackoverflow.com/questions/798 ... rgin-boxes