HTML, размер изображения и проблемы с макетом при печати; использовать разные изображения для печати - PullRequest
Новая
       28

HTML, размер изображения и проблемы с макетом при печати; использовать разные изображения для печати

0 голосов
/ 13 января 2019

У меня есть страницы, которые используют 2 набора изображений: высотой 256px для встроенных изображений, которые затем ссылаются на увеличенное изображение:

Изображения обычно располагаются следующим образом, чтобы получить ряд одинаковой высоты: 

<div class="imageset">
    <div class="imagewithlabel">
        <a href="image_1.jpg">
            <img src="image_1_webembed.jpg" alt="image_1"> </a>
        <br> Image 1 Label
    </div>
    <div class="imagewithlabel">
        <a href="image_2.jpg">
            <img src="image_2_webembed.jpg" alt="image_2"> </a>
        <br> Image 2 Label
    </div>
</div>

.css выглядит так: 

div.imageset {
    text-align: center;
    vertical-align: text-top;
    margin: 0 auto;
}
div.imagewithlabel {
    display: inline-block;
    vertical-align: top;
}

Меньшие изображения должны улучшить скорость загрузки; более-менее миниатюра.

При печати я хочу, чтобы изображения были относительно одинакового размера. Однако для хорошего печатного изображения мне нужно более четкое определение, примерно 300 пикселей / дюйм. Поэтому мне нужно распечатать, используя увеличенное изображение.

У меня две проблемы:

  1. Как правильно расположить изображения.
  2. Поиск простого способа замены имен изображений для печати. ​​

Концентрируясь на проблеме 1, я изменил html, чтобы напрямую ссылаться на большие изображения: 

<div class="imageset">
    <div class="imagewithlabel">
        <a href="image_1.jpg">
            <img src="image_1.jpg" alt="image_1"> </a>
        <br> Image 1 Label
    </div>
    <div class="imagewithlabel">
        <a href="image_2.jpg">
            <img src="image_2.jpg" alt="image_2"> </a>
        <br> Image 2 Label
    </div>
</div>

При приведенной выше замене HTML-файл отображается с большим изображением, обернутым так, что в строке появляется только одно изображение. Игнорируя эту проблему на данный момент, когда я печатаю страницу, изображения имеют правильный размер, но размер текста резко сократился.

Вопрос № 1: В приведенной выше упрощенной версии, где печатаемое изображение совпадает с отображаемым изображением, как я могу получить текст, чтобы поддерживать его относительно больший размер, как видно на html-дисплее?

Я попытался добавить css для печати, затем изменил в css для отображения параметры «max-height» и «object-fit»: 

div.imageset {
    text-align: center;
    vertical-align: text-top;
    margin: 0 auto;
    max-height: 2in;
    object-fit: scale-down;
}
div.imagewithlabel {
    display: inline-block;
    vertical-align: top;
    max-height: 2in;
    object-fit: scale-down;
}

Это уменьшает желаемый размер строки, но сохраняет большие изображения, чтобы они перекрывали текст в абзаце под изображением на дисплее. Они печатаются внахлест и имеют относительно небольшой текст.

Вопрос № 2: Есть ли простой способ заменить другое имя изображения для печати?

...