html - CSS Grid 图像没有填满整个容器

Question

我正在尝试使用 CSS 网格制作不规则网格，基于此 codepen：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>

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

标签： htmlcsscss-grid

Answer 1

您正在.photoframe使用带有 的::after伪元素设置元素的高度padding-bottom:100%。在元素的底部或顶部使用百分比设置的内边距会将内边距设置为元素本身宽度的百分比，而不是父元素的百分比。这就是为什么你看到正方形，元素的高度被限制为宽度的 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>