HTML/CSS (ePub) - Resizing images : some images are ridiculously small when using max-width/height

Question

I'm working on a ePub containing a lot of images. Some are extra wide, some are extra long. All my images are inside a div with a 100% width. I want my images to use 100% of the div witdh unless that would make the height bigger than 100% of the page height.

Currently, my code looks like this:

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

It works when the image is big and takes a full page but when, on the same page, I have one element before and one element after the image container, the container and the image inside get "crushed" and appears super small.

Example of two crushed images

(I put a 1px border on the first image container to check if it was taking 100% of the width.)

Is there a way to fix this?

Thank you a lot for reading.

Answer 1

//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>