调整图像网格大小答案

【问题标题】：Resize image grid调整图像网格大小
【发布时间】：2022-02-08 20:29:31
【问题描述】：

我有一个带有图像网格的画廊，我无法调整其大小以在浏览器和手机中自动剪切具有相同格式的图像。

5th element with bigger height than normal

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>

【问题讨论】：

标签： html css image grid

【解决方案1】：

我个人会使用 CSS 属性“height”和“width”。因为如果我正确理解了您的问题，则第 5 张图像的高度值大于其他 6 张图像。但也许这篇文章会对你有所帮助：

How can I make all images of different height and width the same via CSS?

【讨论】：

这样我只能强制某些尺寸，如果我改变设备或分辨率，它会变大或得到不同的格式
那么你不能只使用一些相对的CSS单位，比如“em”、“%”、“vh”、“vw”或“rem”吗？这样，图像会根据视图的大小调整大小。 @HPAInformática
很抱歉提出了愚蠢的问题，但所有 16:9 的图片都在调整大小以适应网格，但 9:16 的却不是。我可以让它有一个特定的大小，但这不是我正在搜索的内容
那你能解释一下你到底需要什么吗？
@HPAInformática 因为如果它与比率有关，那么您可能想查看“object-fit”属性