Question

我正在尝试根据以下Codepen使用CSS网格制作不规则网格：https://codepen.io/jasheng/pen/BvBvPN

但是，当我尝试将某些容器的跨度值更改为矩形时，背景色不会填充整个容器（它只能完全填充平方的容器）

您知道我该如何解决吗？抱歉，如果这是一个新手问题，这是我第一次使用CSS网格

我尝试更改.photoframe和.gallery中的每个值，我相信这是问题所在。我还添加了高度：100％，对象适合度：封面和背景尺寸：封面，无济于事。

.gallery {
  display: grid;
  grid-template-columns: repeat(7,auto) ;
    grid-template-rows: repeat(1,1fr);
  grid-gap: .8vw;
  width: -webkit-calc(100% );
  width: -moz-calc(100%);
  max-width: 1000px;
  margin-top: -50px;
  margin-bottom: 40px;

}

.textfield {    
    position: relative;
    text-align: center;     
    cursor: pointer;
    background-color: black;
}
.textfield figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 1;
    transition: all 0.8s ease-out;
    transition-delay: 0.2s;
  opacity: 0;
  text-align: center;
  color: white;
  font-size: 18px;
  cursor: pointer; 
}

.textfield:hover figcaption {
    transform: all 0.8s ease-out;
    opacity: 1;
}

.photoframe {
  position: relative;
  background-position: center center;
  background-color: yellow;
  cursor: pointer;
  opacity: 1;
  transition: .5s ease;
    background-size: cover;
    object-fit: cover;
    display: block;
}
.photoframe::after {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
}
.textfield:hover .photoframe{
  opacity: 0.3;
}

.large{
  grid-column-end: span 2;
  grid-row-end: span 2; 
}
.medium{
  grid-column-end: span 2;
  grid-row-end: span 1; 
}
.small{
  grid-column-end: span ;
  grid-row-end: span 1; 
}
.large2{
  grid-column-end: span 3;
  grid-row-end: span 2; 
}

<div class="gallery">

                <div class="textfield large2">
                    <div class="photoframe" href="#"></div>
                    <figcaption>
                     </figcaption>
                </div>


                <div class="textfield small">
                    <div class="photoframe" style="" href="#"></div>
                    <figcaption>
                    </figcaption>
                </div>

                <div class="textfield small">
                    <div class="photoframe" style="" href="#"></div>
                    <figcaption>
                    </figcaption>
                </div>

                <div class="textfield large">
                    <div class="photoframe" href="#" ></div>
                    <figcaption>
                    </figcaption>
                </div>

                <div class="textfield medium">
                    <div class="photoframe" href="#"></div>
                    <figcaption>
                    </figcaption>
                </div>

网格应该全是黄色，没有我们在文本字段中看到的黑色空间大（最右边的矩形）

Answer 1

您正在使用带有.photoframe的{{1}}伪元素来设置::after元素的高度。将填充设置为元素底部或顶部的百分比会将填充设置为元素本身宽度的百分比，而不是父元素的百分比。这就是为什么看到正方形时，元素的高度被限制为宽度的100％，比例为1：1的原因。

我在.photoframe元素上设置了高度：100％，以使其适合其整个网格空间。

padding-bottom:100%

.gallery {
  display: grid;
  grid-template-columns: repeat(7, auto);
  grid-template-rows: repeat(1, 1fr);
  grid-gap: .8vw;
  width: -webkit-calc(100%);
  width: -moz-calc(100%);
  max-width: 1000px;
}

.textfield {
  position: relative;
  text-align: center;
  cursor: pointer;
  background-color: black;
}

.photoframe {
  position: relative;
  background-position: center center;
  background-color: yellow;
  cursor: pointer;
  opacity: 1;
  transition: .5s ease;
  background-size: cover;
  object-fit: cover;
  display: block;
  height: 100%;
}

.photoframe::after {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
}

.textfield:hover .photoframe {
  opacity: 0.3;
}

.large {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.medium {
  grid-column-end: span 2;
  grid-row-end: span 1;
}

.small {
  grid-column-end: span;
  grid-row-end: span 1;
}

.large2 {
  grid-column-end: span 3;
  grid-row-end: span 2;
}

CSS网格图像未填充整个容器

1 个答案: