如何使电商网站功能区背景盒子尺寸统一，不受图片/SVG大小影响

一、让所有功能区背景盒子尺寸完全一致 #

当前盒子高度不一致的核心原因是未给.fe-box设置固定高度，且内部图片高度差异导致盒子被撑开。通过以下修改可解决：

• 给.fe-box添加固定高度（或最小高度），同时将其设为flex垂直布局，确保内部元素居中对齐，避免内容错位。
• 固定图片容器的显示尺寸，隔绝图片本身尺寸对盒子高度的影响。

二、统一所有SVG的显示尺寸 #

直接通过CSS给图片设置固定宽高，搭配object-fit: contain保证SVG缩放时不变形，同时清理无效的flex属性（当前img的flex设置无意义，因为父元素.fe-box默认不是flex容器）。

修改后的完整代码 #

CSS部分

#feature{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px; /* 可选：用gap替代margin，盒子间距更规整 */
}
#feature .fe-box{
  width: 180px;
  /* 关键：固定盒子高度，确保所有盒子尺寸一致 */
  height: 220px;
  text-align: center;
  padding: 15px;
  /* 转为flex垂直布局，内部元素自动居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:20px 20px 34px rgba(0, 0, 0, .03) ;
  border: 1px solid #D3D3D3;
  margin:15px 0;
}

#feature img {
  /* 关键：统一SVG显示尺寸 */
  width: 80px;
  height: 80px;
  /* 保证SVG按比例缩放，不会变形 */
  object-fit: contain;
  margin-bottom: 15px;
}

#feature .fe-box:hover{
  box-shadow:-10px 10px 50px rgba(0, 0, 0, .25) ;
}

/* 简化h3样式写法 */
#feature .fe1 h3{
  display: inline-block;
  padding:9px;
  line-height: 1;
  border-radius: 1px;
  background: #97BC62;
  color: #2C5F2D;
}
#feature .fe2 h3{
  display: inline-block;
  padding:9px;
  line-height: 1;
  border-radius: 1px;
  background: #FAD0C9;
  color: #6E6E6D;
}
#feature .fe3 h3{
  display: inline-block;
  padding:9px;
  line-height: 1;
  border-radius: 1px;
  background: #c72d1b;
  color: #FDD20E;
}
#feature .fe4 h3{
  display: inline-block;
  padding:9px;
  line-height: 1;
  border-radius: 1px;
  background: #97BC62;
  color: #2C5F2D;
}
#feature .fe5 h3{
  display: inline-block;
  padding:9px;
  line-height: 1;
  border-radius: 1px;
  background: #97BC62;
  color: #2C5F2D;
}

HTML部分（无需修改）

<section id="feature" class="fe-pad">
    <div class="fe-box fe1">
    <img src="/img/emptycart.svg">
    <h3>Buy Now</h3>
    </div>
    <div class="fe-box fe2">
        <img src="/img/freeship.svg">
        <h3>Free Shipping</h3>
    </div>
    <div class="fe-box fe3">
        <img src="/img/emptycart.svg">
        <h3>Buy Now</h3>
    </div>
    <div class="fe-box">
        <img src="/img/emptycart.svg">
        <h3>Buy Now</h3>
    </div>
    <div class="fe-box">
        <img src="/img/emptycart.svg">
        <h3>Buy Now</h3>
    </div>
</section>

关键修改说明 #

1. 盒子尺寸统一：给.fe-box设置固定height（可根据需求调整数值），同时转为flex垂直布局，确保图片和文字始终居中，彻底解决内容高度差异导致的盒子变形问题。
2. SVG尺寸统一：给img设置固定宽高，搭配object-fit: contain，让所有SVG在固定区域内按比例缩放，既保证大小一致又不会出现拉伸变形。
3. 代码优化：清理了img上无效的flex属性，简化了重复的padding写法，让代码更简洁易维护。

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