Post 图像大小相同的网格布局

Question

我正在尝试为帖子创建网格布局，无论图片大小如何，图片尺寸都相同。我似乎无法弄清楚。例如，如果有一个正方形图像和一个矩形图像，它们将填充相同的尺寸。

html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .blog-container {
            width: 90%;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 1rem;
            margin: 0 auto;
        }

        img {
            max-width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

<div class="blog-container">
        <div class="post">
            <div class="img">
                <img src="pic1.jpg" alt="">
            </div>
            <div class="content">
                <h2>Post title 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis ex eu dolor auctor, bibendum luctus turpis feugiat.
                    Maecenas porttitor felis purus. Maecenas neque libero, tristique in mattis ac, suscipit non turpis.</p>
            </div>
        </div>
        <div class="post">
            <div class="img">
                <img src="pic2.jpg" alt="">
            </div>
            <div class="content">
                <h2>Post title 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis ex eu dolor auctor, bibendum luctus turpis feugiat.
                    Maecenas porttitor felis purus. Maecenas neque libero, tristique in mattis ac, suscipit non turpis.</p>
            </div>
        </div>
        <div class="post">
            <div class="img">
                <img src="pic1.jpg" alt="">
            </div>
            <div class="content">
                <h2>Post title 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis ex eu dolor auctor, bibendum luctus turpis feugiat.
                    Maecenas porttitor felis purus. Maecenas neque libero, tristique in mattis ac, suscipit non turpis.</p>
            </div>
        </div>
        <div class="post">
            <div class="img">
                <img src="pic2.jpg" alt="">
            </div>
            <div class="content">
                <h2>Post title 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis ex eu dolor auctor, bibendum luctus turpis feugiat.
                    Maecenas porttitor felis purus. Maecenas neque libero, tristique in mattis ac, suscipit non turpis.</p>
            </div>
        </div>
    </div>

这就是我想要的

但这就是我所拥有的

Answer 1

首先在图像中设置静态宽度，然后删除 object-fit
将图像样式更改为：

        img {
            width: 100%;
            height: 200px;
            display: block;
        }

Answer 2

设置图片容器的高度，即名为class'img'.

的元素

将此代码添加到您的 CSS 文件中

.img {
    height: 400px;
    width: 100%;
 }

Post 图像大小相同的网格布局

Post Grid Layout with Images the Same Size

css

css-grid

grid-layout