html - CSS 网格图像未填满整个容器

Question

我正在尝试使用 CSS 网格制作不规则网格，基于此代码笔:https://codepen.io/jasheng/pen/BvBvPN

但是，当我尝试将某些容器的跨度值更改为矩形时，背景颜色不会填满整个容器(它只会完全填满方形容器)

你知道我怎么解决这个问题吗？抱歉，这是一个新手问题，这是我第一次使用 css 网格

我已经尝试更改 .photoframe 和 .gallery 中的每个值，我认为这是问题所在。我还添加了 height:100%、object-fit: cover 和 background-size: cover，但无济于事。

.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

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

我在 .photoframe 元素上设置了 height: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;
}

<div class="gallery">

  <div class="textfield large2">
    <div class="photoframe"></div>
  </div>

  <div class="textfield small">
    <div class="photoframe"></div>
  </div>

  <div class="textfield small">
    <div class="photoframe"></div>
  </div>

  <div class="textfield large">
    <div class="photoframe"></div>
  </div>

  <div class="textfield medium">
    <div class="photoframe"></div>
  </div>

</div>