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>

当图像较大并占用整页时有效，但是在同一页面上图像容器之前和之后一个元素时，容器和内部图像被“压碎”并显得很小

Example of two crushed images

（我在第一个图像容器上放置了一个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>

HTML / CSS（ePub）-调整图像大小：使用最大宽度/高度时，某些图像太小了

1 个答案: