为何设置display:inline-block后，absolute定位的overlay尺寸与图片一致？

核心原因拆解 #

• 绝对定位元素的width: 100%和height: 100%，是相对于**它的定位父元素（最近的position不为static的祖先）**的尺寸计算的。
• 当你把.portfolio-item设为inline-block后，它的默认尺寸是由内部内容撑开的——如果没有给它显式设置width和height，它的宽高就会完全被同级的img元素撑起来，和图片尺寸一致。
• 你的.portfolio-item__overlay以.portfolio-item为定位参考，自然会继承这个被图片撑开的尺寸，看起来就和图片一样大了。

解决思路 #

如果想让overlay的尺寸符合你预期的父元素大小，只需要给.portfolio-item显式设置宽高，比如：

.portfolio-item {
  display: inline-block;
  position: relative; /* 确保overlay以此为定位参考 */
  width: 400px; /* 自定义宽度 */
  height: 300px; /* 自定义高度 */
}

或者用min-width/min-height、padding等方式，让父元素尺寸不依赖内部图片的大小。

示例代码参考 #

<div class="portfolio-item">
  <img src="demo.jpg" alt="作品图">
  <div class="portfolio-item__overlay"></div>
</div>

.portfolio-item {
  display: inline-block;
  position: relative;
  width: 400px;
  height: 300px;
  border: 1px solid #ccc;
}

.portfolio-item__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

img {
  width: 100%; /* 让图片自适应父元素尺寸 */
  height: 100%;
  object-fit: cover;
}

内容的提问来源于stack exchange，提问作者furkat