调整图像网格的大小

Question

我有一个图片库的图像网格，我不能调整大小，以自动削减相同格式的图像在浏览器和电话。

身高比正常高的第五元素

CSS

.grid figure {
    position: relative;

    overflow: hidden;

    background: #3085a3;
    text-align: center;
    cursor: pointer;
}

.grid figure img {
    position: relative;
    display: block;
    max-width: 100%;
    opacity: 0.8;
}

HTML

<li class="grid">
    <a href="#image-6">
        <figure class="effect-apollo">
            <img src="{$e}" alt="image6">
            <figcaption></figcaption> 
        </figure>
    </a>
    
    <div class="lb-overlay" id="image-6">
        <img src="{$e}" alt="image6" />
        <div class="gal-info">
            <h3>Tilling</h3>
            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
        </div>
        <a href="#" class="lb-close">Close</a>
    </div>
</li>

Answer 1

我个人会使用CSS属性“高度”和“宽度”。因为如果我正确地理解了你的问题，第五张图片的高度值会比其他6幅高。但也许这篇文章会帮助你：

如何通过CSS使所有不同高度和宽度的图像相同？