如何让div容器的尺寸与内部包含的图片尺寸完全一致

修复方案 #

你遇到的阴影错位问题有两个核心原因：

• 给子元素#image-one设置的margin-right: 5rem属于子元素外边距，会撑开父容器.img-wrapper，导致父容器尺寸比内部图片大出5rem的右间距
• 父容器.img-wrapper默认没有设置尺寸贴合内容的规则，且flex布局默认会拉伸子元素高度，也会导致容器和图片尺寸不一致

仅需要修改部分CSS规则即可解决，其余原有代码无需变动：

.image__container--one {
  display: flex;
  flex-direction: row;
  margin-top: 2rem;
  align-items: flex-start; /* 新增：避免flex容器拉伸子元素高度 */
}

#image-one {
  height: 60rem;
  width: auto;
  /* 删除原有的margin-right: 5rem，移到父容器上 */
  display: block;
  transition: all 1s ease;
}

.img-wrapper {
  overflow: hidden;
  box-shadow: 2px 2px 20px 10px rgb(43, 43, 43);
  width: fit-content; /* 新增：宽度完全贴合内部内容 */
  height: fit-content; /* 新增：高度完全贴合内部内容 */
  margin-right: 5rem; /* 新增：承接原图片的右外边距 */
}

修改后.img-wrapper的尺寸会和内部图片完全吻合，阴影会完全贴合图片边缘，同时不影响原有hover放大图片的交互效果。

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