gpt4 book ai didi

html - 控制 CSS 网格中的响应式网格区域高度

转载 作者:行者123 更新时间:2023-11-27 23:05:33 24 4
gpt4 key购买 nike

我正在尝试使用 CSS 网格制作响应式图片库,但我遇到了调整大小的问题。

gallery image

我希望较大的图像成为行的最大高度,但在调整窗口大小时,较小的图像会扩展图像上可见的网格。

我怎样才能做到这一点?

.container {
margin: 0 auto;
}

.gallery-areas {
display: grid;
grid-gap: 30px;
grid-template-areas: "big-image-1 big-image-2 small-image-1 small-image-2" "big-image-1 big-image-2 small-image-3 small-image-4"
}

.image-1 {
grid-area: big-image-1;
}

.image-2 {
grid-area: big-image-2;
}

.image-3 {
grid-area: small-image-1;
}

.image-4 {
grid-area: small-image-2;
}

.image-5 {
grid-area: small-image-3;
}

.image-6 {
grid-area: small-image-4;
}

img {
width: 100%;
}
<div class="container">
<section class="gallery">
<div class="gallery-areas">
<img class="image-1" src="https://dummyimage.com/389x435/000/fff" alt="">
<img class="image-2" src="https://dummyimage.com/389x435/000/fff" alt="">
<img class="image-3" src="https://dummyimage.com/389x201/000/fff" alt="">
<img class="image-4" src="https://dummyimage.com/389x201/000/fff" alt="">
<img class="image-5" src="https://dummyimage.com/389x201/000/fff" alt="">
<img class="image-6" src="https://dummyimage.com/389x201/000/fff" alt="">
</div>
</section>
</div>

最佳答案

我对你的问题的理解是,当屏幕较小时,你希望使较大的图像与较小的图像对齐。

问题是您的图片宽度为 100%,因此当屏幕较小时,高度(自动)较短,因为您的图片已达到 100% 标记。

我将图像 1 和 2 的高度更新为 100%,并将 imgmax-width 设置为 100%,而不是使用宽度 100%。这样,较大的图像可以具有 100% 的高度,并且仍然具有适当的比例,因为宽度默认为自动

.container {
margin: 0 auto;
}

.gallery-areas {
display: grid;
grid-gap: 30px;
grid-template-areas: "big-image-1 big-image-2 small-image-1 small-image-2" "big-image-1 big-image-2 small-image-3 small-image-4"
}

.image-1 {
grid-area: big-image-1;
}

.image-2 {
grid-area: big-image-2;
}

.image-3 {
grid-area: small-image-1;
}

.image-4 {
grid-area: small-image-2;
}

.image-5 {
grid-area: small-image-3;
}

.image-6 {
grid-area: small-image-4;
}

img {
max-width: 100%;
}
.image-1, .image-2 {
height: 100%;
}
<div class="container">
<section class="gallery">
<div class="gallery-areas">
<img class="image-1" src="https://dummyimage.com/389x435/000/fff" alt="">
<img class="image-2" src="https://dummyimage.com/389x435/000/fff" alt="">
<img class="image-3" src="https://dummyimage.com/389x201/000/fff" alt="">
<img class="image-4" src="https://dummyimage.com/389x201/000/fff" alt="">
<img class="image-5" src="https://dummyimage.com/389x201/000/fff" alt="">
<img class="image-6" src="https://dummyimage.com/389x201/000/fff" alt="">
</div>
</section>
</div>

关于html - 控制 CSS 网格中的响应式网格区域高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49675712/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com