Размеры изображений изменяются в режиме предварительного просмотра

Question

У меня есть несколько изображений (не фоновых изображений) на моей веб-странице. Когда я вижу предварительный просмотр в масштабе 100%, изображения выглядят нормально, но моя проблема заключается в том, что когда я делаю prview с уменьшенным масштабом, все изображения приходят меньше, чем фактический размер. Я не предоставил никаких атрибутов ширины или высоты для тега IMG, поэтому я предполагаю, что при предварительном просмотре он будет загружаться так, как они отображаются на экране. Я использовал ниже CSS для печатных СМИ для IMG, но это не сработало

img {max-width:100%; }

Я ожидаю того же размера изображения в Shrink, чтобы соответствовать и 100% масштаба.

Это возможно? я что-то упустил в печати CSS? Пожалуйста посоветуй.

Answer 1

Когда я работал над своим проектом, когда мне нужно было получить исходный размер изображения в предварительном просмотре печати, мне пришлось использовать !important. В противном случае он не перезапишет стиль, изначально определенный для изображения на странице.

Мне также пришлось изменить высоту контейнеров изображений:

@media print {
      .logo-container,
      .img-wrapper,
      img {
        max-height: none !important;
        height: 100% !important;
}

Answer 2

У вас есть ваши изображения внутри "контейнера" или "Div" и т. Д.? Вы должны создать стиль печати для них, а не только для элементов IMG.

Я бы предложил использовать один и тот же стиль для ваших элементов как для экрана, так и для печати, вот так (это мой print.css):

/*How they look like on the print preview*/
@media print {
    #poweredbyLogo{
        width:213px;
    }
    #logoframe{
        height:80px;
        margin-top:6px;
    }

    .space{
        padding-left:20px;
    }

    .col-md-6.a1{
        background-color: #0000f6!important;
    }
    .col-md-6.a2{
        background-color: #d3d3d3!important;
    }
}
/*How they look like on the screen*/
@media screen {
    #poweredbyLogo{
        width:47%;
    }

    #logoframe{
        height:80px;
        margin-top:6px;
    }

    .space{
        padding-left:20px;
    }
}

Надежда помогает, удачи.

Answer 3

Также вы можете попробовать это.

      <img class="application-logo res-media" width="65" height="65">


@media screen {
    .application-logo{
        width: 65px !important;
        height: 60px !important;
        cursor: pointer;
        margin: 25px;
    }
}

@media print {
    .application-logo, ._imgcont, img {
        max-height: none !important;
        height: 65px !important;
    }
}