主页 / 问题 / 1555313
Accepted
Alexsander
Asked:2023-12-09 17:51:29 +0000 UTC2023-12-09 17:51:29 +0000 UTC

为什么图片会超出块范围？

  • 772

max-height: 400px指定整个网格的约束。但是子元素超出了限制，尽管它们应该height相对于父元素的大小进行拉伸。

https://codepen.io/Alexxxsander/pen/XWOGedj

<div class="grid">
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
  </div>

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  outline: 2px solid royalblue;
  max-height: 400px;
  gap: 10px;
}

.grid__col {
  height: 100%;  
}

.grid__col:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.grid__col:last-child {
   grid-column: 3 / -1;
 }

.grid__col img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}
html

2 个回答

  1. Best Answer

    据我了解，图像应该保持纵横比，同时完全填充它们所在的块。然后将属性添加到这些单元格（块）就足够了overflow: hidden。如果图片的大小和比例不允许它们完全适合容器，则图片将被裁剪。

    * { box-sizing: border-box; }

.grid {
  display: grid;
  grid-template: repeat(2, 1fr) / repeat(4, 1fr);
  gap: 10px;
  height: 400px;
  outline: 2px solid royalblue;
}

.grid__col {
  overflow: hidden;
}
.grid__col:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}
.grid__col:last-child {
  grid-column: 3 / -1;
}

.grid__col img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
    <div class="grid">
  <div class="grid__col">
    <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
  </div>
  <div class="grid__col">
    <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
  </div>
  <div class="grid__col">
    <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
  </div>
  <div class="grid__col">
    <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
  </div>
  <div class="grid__col">
    <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
  </div>
  <div class="grid__col">
    <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
  </div>
</div>

    • 2

  2. 如果添加属性overflow-y: auto; 对于 .grid 类，这将创建垂直滚动，因为 .grid__col 块内的内容超出了 .grid 块的设置高度。所以有些内容被隐藏了，并且会出现一个滚动条来显示隐藏的部分。

    https://codepen.io/dovgaldmitriy/pen/abXMVBa

    * {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  outline: 2px solid royalblue;
  max-height: 400px;
  gap: 10px;
  overflow-y: auto;
}

.grid__col {
  height: 100%;  
}

.grid__col:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.grid__col:last-child {
   grid-column: 3 / -1;
 }

.grid__col img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}
    <div class="grid">
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
</div>

    • 1

相关问题