Bagaimana untuk mencapai pertindihan dan saiz yang sama bagi imej/div adik-beradik dalam elemen induk dengan padding

Question

Saya mahukan div yang meliputi imej. Saya dapat melakukan ini dengan menggunakan position: relative，并在div中使用position: absolute来使div覆盖图像，但是background-color dalam elemen induk yang akan melapik padding elemen induk, menyebabkan ia tidak menutup dengan betul.

Di bawah ialah coretan yang menunjukkan masalah itu.

.parent {
  position: relative;
  padding: 10px;
  width: 40%;
}

.image {
  width: 100%;
  height: 100%;
  border-radius: 13px;
}

.overlay {
  position: absolute;
  background-color: red;
  width: 100%;
  height: 100%;
  border-radius: 13px;
  left: 0;
  top: 0;
  opacity: 0.2;
}

<div class="parent">
  <img class="image" src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156">
  <div class="overlay"></div>
</div>

Saya boleh menggunakan beberapa calc()来减去padding来实现相当接近的效果。这几乎可以工作，但是divpadding terlalu banyak di bahagian bawah. Bagaimanapun, saya tidak mahu mengeraskan banyak nilai untuk padding, jadi walaupun ia berfungsi sama sekali, saya tidak begitu menyukai penyelesaian ini.

Berikut adalah coretan yang menunjukkan kaedah calc().

.parent {
  position: relative;
  padding: 10px;
  width: 40%;
}

.image {
  width: 100%;
  height: 100%;
  border-radius: 13px;
}

.overlay {
  position: absolute;
  background-color: red;
  width: calc(100% - 2 * 10px);
  height: calc(100% - 2 * 10px);
  border-radius: 13px;
  left: 10px;
  top: 10px;
  opacity: 0.2;
}

<div class="parent">
  <img class="image" src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156">
  <div class="overlay"></div>
</div>

Answer 1

Apabila menggunakan HTML5, penyemak imbas akan img标签的底部添加一些填充。可以通过将图像设置为块级元素来避免这种情况。所以只需在.image类中添加display: blockdan kemudian tidak mengapa.

Sebenarnya, untuk menentukan lebar/tinggi elemen mutlak, anda boleh menggunakan calc()，还可以使用4个值top、right、bottom、left sebaliknya.

:root {
  --custom-padding: 10px;
}

.parent {
  position: relative;
  padding: var(--custom-padding);
  width: 40%;
}

.image {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  display: block;
}

.overlay {
  position: absolute;
  background-color: red;
  border-radius: 13px;
  bottom: var(--custom-padding);
  right: var(--custom-padding);
  left: var(--custom-padding);
  top: var(--custom-padding);
  opacity: 0.2;
}

<div class="parent">
  <img class="image" src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156">
  <div class="overlay"></div>
</div>

Answer 2

Coretan ini melakukannya dengan cara yang berbeza sedikit, meletakkan img di dalam div tindanan dan menggunakan tindanan hijau, kelegapan rendah yang sebenar sebagai unsur pseudo selepas div tindanan.

Dengan cara ini anda tidak perlu membina sebarang pengetahuan tentang padding elemen induk.

.parent {
  position: relative;
  padding: 10px;
  width: 40%;
  background: red;
  height: fit-content;
}

.image {
  width: 100%;
  border-radius: 13px;
  top: 0;
  left: 0;
}

.overlay {
  position: relative;
  padding: 0;
  width: fit-content;
  height: fit-content;
}

.overlay::after {
  content: '';
  position: absolute;
  background-color: green;
  width: 100%;
  height: 100%;
  border-radius: 13px;
  left: 0;
  top: 0;
  opacity: 0.2;
  padding: 0px;
}

<div class="parent">
  <div class="overlay"> <img class="image" src="https://cards.scryfall.io/normal/front/4/f/4f3deefe-28bc-4e45-a0a0-ab03167e2e81.jpg?1561942156"></div>
</div>