如何消除aside元素内图片两侧多余空白，统一内边距为20px？

问题描述 #

向aside元素添加图片后，元素尺寸变大，图片两侧出现多余空白。希望图片两侧的空白与顶部一致，保持20px内边距；尝试设置aside固定宽度后，多余空白转移到了间隙处。

解决方案 #

问题核心在于图片未填满aside的内边距区域，flex布局下图片居中后两侧露出aside背景。只需让图片自适应aside的内部宽度即可：

• 给图片添加 width: 100%，使其填满aside的内容区域（自动减去左右20px的padding），这样图片两侧就不会出现多余空白，和顶部内边距保持一致。

修改后的代码 #

CSS代码 #

aside {
  display: flex;
  grid-area: as;
  background-color: aquamarine;
  border-radius: 20px;
  padding: 20px;
  justify-content: center;
  align-items: flex-start;
}

#asideImg{
  display: block;
  object-fit: scale-down;
  border-radius: 20px;
  width: 100%; /* 新增：让图片填满aside内部宽度 */
}

HTML代码 #

<div class="container">
  <header>
    <a href="/Main.html"
      ><img src="/media/spöke.png" alt="logga" id="mainLogo"
    /></a>
    <h1 id="headerText">Min Halloweensida</h1>
  </header>
  <nav>
    <a href="/Pg2.html">Pg2</a>
    <a href="/Pg3.html">Pg3</a>
    <a href="/Pg4.html">Pg4</a>
  </nav>
  <aside><img src="https://placehold.co/400x400" alt="placeHolder" id="asideImg"></aside>
  <main>main</main>
  <footer>footer</footer>
</div>

补充说明 #

如果图片的原始宽高比和aside的内部宽高比不一致，object-fit: scale-down会保证图片完整显示、不变形，同时填满宽度，高度自适应，既满足内边距要求，又能保持图片的正确比例。

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