按钮内插图片引发变形移位，如何固定按钮尺寸适配图片？

你现在的问题核心是按钮内部未做合理布局控制，且未限制图片尺寸，导致图片撑大按钮、文字偏移。直接按以下修改即可实现图片不改变按钮尺寸、完全置于按钮内部的效果：

修改后的完整代码 #

CSS 代码

.navbar {
  display: flex;
  padding: 2em;
}

.smallbutton {
  display: flex;
  background-color: #959595;
  gap: 10px; /* 按钮间添加间距，避免重叠 */
}

.smallbutton button {
  min-width: 158px;
  display: flex; /* 改为flex布局，让内部元素横向排列 */
  align-items: center; /* 垂直居中对齐图片和文字 */
  justify-content: center; /* 水平居中所有内容 */
  gap: 8px; /* 图片与文字的间距 */
  padding: 14px 40px;
  color: #2B2A2A;
  border-radius: 25px;
  border: none; /* 移除默认边框，保持样式统一 */
  background-color: #959595;
  cursor: pointer;
}

/* 限制图片尺寸，防止撑大按钮 */
.smallbutton button img {
  width: 20px;
  height: 20px;
  object-fit: contain; /* 保持图片比例，避免变形 */
}

HTML 代码

<div class="navbar">
  <div class="smallbutton">
    <button class="cob">
      <img src="static/img/calend 1.png" alt="日历图标">
      События
    </button>
    <button>Купить R$</button>
    <button>Лотерея</button>
    <button>Бонусы</button>
    <button>Рефералка</button>
  </div>
</div>

关键改动说明 #

• 将按钮的display:block改为display:flex，配合align-items:center和justify-content:center，让内部图片与文字自动居中，解决文字偏移问题
• 给按钮内部添加gap属性，控制图片和文字的间距，排版更规整
• 给图片设置固定宽高+object-fit:contain，既限制图片尺寸不撑大按钮，又保证图片比例不变形
• 给.smallbutton添加gap，避免按钮间重叠，窗口缩放时也能保持合理间距

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