Вы хотите иметь хорошее качество печати, а не низкое качество экрана (75 точек на дюйм).Изображения, однако, состоят из пикселей, и они определяют разрешение.Поэтому достаточно иметь изображения с несколькими значениями ширины и высоты.
В HTML / jQuery обычно достаточно, чтобы большее изображение было определено как меньшее с помощью < img src=... width=FRACTION height=FRACTION >
или использовать CSS media: print.
Какзапоздалая мысль: может быть, гораздо приятнее не вставлять текст в пиксельное изображение, но в качестве наложения.
Немного больше объяснений:
Если вы просматриваете изображение высокой четкости наэкран стандартным средством просмотра Windows и выберите 100% дисплей (без масштабирования), тогда вы увидите, что он больше.Это потому, что у него больше пикселей: скажем, 4000 x 3000.
В HTML вы можете отобразить его меньше:
<img src="bigimage.png" width="400" height="300">
Это проще всего.В CSS используется фоновое изображение, которое часто вообще не печатается.
Если ваша страница имеет «вид печати», вы могли бы использовать меньшее, более быстрое изображение для обычного отображения, а при просмотре печати -большое изображение.
Возможно наложение текста в HTML, но шрифт должен быть лицензирован, если он нестандартный.Достаточно плавающего div
.
По поводу flex: кто-то другой должен ответить, что ;Давно я не прогибался.