HTML / CSS (ePub) - Изменение размера изображений: некоторые изображения смехотворно малы при использовании max-width / height - PullRequest
Новая
       172

HTML / CSS (ePub) - Изменение размера изображений: некоторые изображения смехотворно малы при использовании max-width / height

0 голосов
/ 07 августа 2020

Я работаю над ePub, содержащим много изображений. Некоторые из них очень широкие, некоторые - очень длинные. Все мои изображения находятся внутри div со 100% шириной. Я хочу, чтобы мои изображения использовали 100% div witdh, если это не сделало бы высоту больше 100% высоты страницы.

В настоящее время мой код выглядит следующим образом: 

<div style="width: 100%; max-height: 100%;">
    <img style="max-height: 100%; max-width: 100%; display: block;" src="image.jpg" />
</div>

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

Пример двух раздавленных изображений

(я помещаю границу в 1 пиксель на первом контейнере изображения, чтобы проверить, не он занимал 100% ширины.)

Есть ли способ исправить это?

Большое спасибо за чтение.

1 Ответ

0 голосов
/ 07 августа 2020 
//you can do it by making a class with max-width and max-height to 100% then give this class to all of your images.    
<style>
        .imgclass{
            max-width: 100%;
            max-height: 100%;
            display: block; /* remove extra space below image */
        }
    </style>
     <div>
            <img src="man-profile.png" class="imgclass">
 <img src="man-profile.png" class="imgclass">
        </div>
...