Question

我有一个包含2列的CSS网格容器，一个是自动调整的，另一个填充其余空间：grid-template-columns: auto 1fr;第一列有一个图像网格项，第二列有一个网格项文本。我想要的是图像的高度与文本网格项的高度相同。我知道我可以只用像素对行高进行硬编码，然后给出像素高度的图像。但是，对行高进行硬编码可能会有危险，因为内容可能会发生变化，然后可能不再合适。我怎样才能避免硬编码高度，但要确保图像网格项占据其网格区域的整个高度（与文本网格项相同的高度）？我试过给图像网格项目height: 100%;样式，但是在所有浏览器上，但是chrome，这只会使图像恢复到原始大小。

示例代码：

    <style>
    * {
        box-sizing: border-box;
    }
    .header-image {
        border: 2px solid green;
        grid-area: hdimg;
        height: 80px;
    }
    .header-text {
        border: 2px solid green;
        grid-area: hdtxt;
    }
    .container {
        border: 1px solid red;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
        "hdimg hdtxt";
    }
</style>
<html>
<body>
    <div class="container">
        <img class="header-image" src="image.jpg">
        <div class="header-text">
            <h1>Some Text</h1>
        </div>
    </div>
</body>
</html>

控制网格项目图像的高度

0 个答案: