CSS печати: поместитесь в одну страницу
На моей странице существует только одно изображение. Вид 1500x3000 пкс.
В принтере мне нужна максимальная ширина того этого изображения, чтобы быть шириной страницы, таким образом, я сделал: ширина 100% в CSS, и это работает.
Но высота... старая ерунда высоты 100% никогда не будет работать. Поскольку это всегда будут 100% родительского контейнера, затем кому-то нужно было определить высоту. Или HTML или тело.
Так, мой вопрос: заставьте это изображение поместиться в одну страницу.
Какие-либо идеи?
2 ответа
Один из способов сделать это - выполнить некоторые вычисления, чтобы выяснить, какая ширина приведет к тому, что длина будет ровно одну страницу, а затем соответственно установите ширину в CSS.
Если я правильно понимаю, не могли бы вы сделать
.OnePageImage { height: 100%; width: 600px; }
Где 600 пикселей (ширина) - это общая ширина страницы. Тогда изображение уместится на одной странице (хотя потенциально с некоторым искажением). Вы также можете добавить стиль разрыва страницы css в div до и после изображения, что делается следующим образом:
.break { page-break-after:always; }
Тогда код будет выглядеть так:
<div class="break"></div>
<img src="[your image src]" class="OnePageImage" />
<div class="break"></div>