Question

我正在使用Bootstrap 4，并且有3行和3列是图像。图像为670px x 670px。目前，它们适合宽度，但是只有第一行和第二行可见。我希望页面加载时所有行和列都可见。有没有办法使它们适合高度和宽度？

我在父容器上尝试了100vh，但无济于事...

https://codepen.io/samgardiner/pen/XLLePR

<section class="work-hub">
        <div class="container-fluid h-100">
            <div class="work-hub__row row">
                <div class="work-hub__col col-sm-4 p-0">
                    <img src="https://picsum.photos/670" alt="" class="img-fluid">
                </div>
                <div class="work-hub__col col-sm-4 p-0">
                    <img src="https://picsum.photos/670" alt="" class="img-fluid">
                </div>
                <div class="work-hub__col col-sm-4 p-0">
                    <img src="https://picsum.photos/670" alt="" class="img-fluid">
                </div>
            </div>

            <div class="work-hub__row row">
                <div class="work-hub__col col-sm-4 p-0">
                    <img src="https://picsum.photos/670" alt="" class="img-fluid">
                </div>
                <div class="work-hub__col col-sm-4 p-0">
                    <img src="https://picsum.photos/670" alt="" class="img-fluid">
                </div>
                <div class="work-hub__col col-sm-4 p-0">
                    <img src="https://picsum.photos/670" alt="" class="img-fluid">
                </div>
            </div>

             <div class="work-hub__row row">
                <div class="work-hub__col col-sm-4 p-0">
                    <img src="https://picsum.photos/670" alt="" class="img-fluid">
                </div>
                <div class="work-hub__col col-sm-4 p-0">
                    <img src="https://picsum.photos/670" alt="" class="img-fluid">
                </div>
                <div class="work-hub__col col-sm-4 p-0">
                    <img src="https://picsum.photos/670" alt="" class="img-fluid">
                </div>
            </div>
        </div>
    </section>

Answer 1

它应符合以下CSS规则：

.work-hub__col {
  height: calc(100vh / 3 );
}

.work-hub__col > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

https://codepen.io/anon/pen/ZddapX

如何使3行3列填充屏幕？

1 个答案: