响应式网格图块覆盖[重复]

Question

我有这个网格，（通常）您可以在其中选择一个图块。选定的图块应该具有透明的蓝色覆盖层。当调整网格宽度时，如何在网格中制作图像叠加层并保持其容器的宽度？

这样：

我制作了.tile__overlay position: absolute;，乍一看还不错。但这意味着我失去了响应能力，这意味着当图块小于其最大尺寸时，叠加层不会调整到其父尺寸。

.grid {
  display: grid;
  grid-gap: 6px;
  max-width: 306px;
  grid-template-columns: minmax(min-content, 150px) minmax(min-content, 150px);
}

.tile {
  padding: 0;
  border: 0;
  max-height: 150px;
  max-width: 150px;
}

.tile__image {
  height: 100%;
  width: 100%;
  max-height: 150px;
  max-width: 150px;
  display: block;
  object-fit: contain;
}

.tile__overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(29, 151, 255, 0.9);
}

<div class="grid">
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/1/150/150.jpg" alt="">
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/18/150/150.jpg" alt="">
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/33/150/150.jpg" alt="">
    <div class="tile__overlay" />
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/47/150/150.jpg" alt="">
  </button>
</div>

Answer 1

为下面提到的添加了 CSS

button.tile:after {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: hsla(240, 100%, 50%, 0.5411764705882353);
    z-index: 999;
    content: '';
}
.tile{position:relative;}

.grid {
  display: grid;
  grid-gap: 6px;
  max-width: 306px;
  grid-template-columns: minmax(min-content, 150px) minmax(min-content, 150px);
}

.tile {
  padding: 0;
  border: 0;
  max-height: 150px;
  max-width: 150px;
}

.tile__image {
  height: 100%;
  width: 100%;
  max-height: 150px;
  max-width: 150px;
  display: block;
  object-fit: contain;
}

.tile__overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(29, 151, 255, 0.9);
}

button.tile:after {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: hsla(240, 100%, 50%, 0.5411764705882353);
    z-index: 999;
    content: '';
}
.tile{position:relative;}

<div class="grid">
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/1/150/150.jpg" alt="">
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/18/150/150.jpg" alt="">
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/33/150/150.jpg" alt="">
    <div class="tile__overlay" />
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/47/150/150.jpg" alt="">
  </button>
</div>

Answer 2

使用pseudo 代码，您可以轻松实现此目的。我还为视觉效果添加了活动类， 您可以在以下课程中随意使用颜色tile:hover::after

.grid {
  display: grid;
  grid-gap: 16px;
  max-width: 306px;
  grid-template-columns: minmax(min-content, 150px) minmax(min-content, 150px);
}

.tile {
  padding: 0;
  border: 0;
  max-height: 150px;
  max-width: 150px; 
  position: relative;
  border: 1px solid transparent;
}

.tile__image {
  height: 100%;
  width: 100%;
  max-height: 150px;
  max-width: 150px;
  display: block;
  object-fit: contain;
}

.tile:hover::after,
.tile:active::after,
.tile:focus::after,
.tile.active::after{
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(29, 151, 255, 0.57);
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-shadow: 0px 0px 5px 5px #6BA1F9;
    border: 1px solid #ffffffab;
    border-radius: 4px;
}
}

<div class="grid">
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/1/150/150.jpg" alt="">
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/18/150/150.jpg" alt="">
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/33/150/150.jpg" alt="">
    <div class="tile__overlay" />
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/47/150/150.jpg" alt="">
  </button>
</div>