HTML/CSS (ePub) - 调整图像大小：使用最大宽度/高度时，某些图像非常小

Question

我正在制作一个包含大量图像的 ePub。 有些特别宽，有些特别长。 我所有的图像都在一个 100% 宽度的 div 内。 我希望我的图像使用 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>

当图像很大并且占据一整页时，它可以工作，但是当在同一页面上，我在图像容器之前有一个元素，在图像容器之后有一个元素时，容器和里面的图像被“压碎”并且看起来超级小。

两个破碎图像的示例

（我在第一个图像容器上放置了一个 1px 的边框，以检查它是否占用了 100% 的宽度。）

有没有办法来解决这个问题？

非常感谢您的阅读。

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>