如何使用CSS为GIF添加圆形背景且避免内容被遮挡

你遇到的遮挡问题核心有两个：

• img默认box-sizing为content-box，你设置的width:20%仅对应内容区域宽度，加上左右各30px padding后，元素实际总宽度大于20%，如果元素高度和宽度不一致，border-radius:100%会呈现为椭圆，自然会裁掉边缘的GIF内容
• 没有指定图片的自适应规则，GIF默认撑满内容区域，当内容区域边角超出圆形裁剪范围时就会被遮挡

方案1：额外添加父容器（兼容性最好，无需修改GIF本身属性） #

调整HTML结构，给img套一层父容器，把圆形背景、padding的属性都放到父容器上：

<div class="code-img-wrapper">
  <img src="https://media.giphy.com/media/WFZvB7VIXBgiz3oDXE/giphy.gif" class="code-img" alt="Code">
</div>

对应CSS修改为：

.code-img-wrapper {
  background-color: #66BFBF;
  border-radius: 100%;
  padding: 30px;
  width: 20%;
  box-sizing: border-box;
  aspect-ratio: 1/1; /* 保证容器是正正方形，圆角呈现为正圆 */
}
.code-img {
  width: 100%;
  display: block; /* 消除img默认底部空白 */
}

方案2：无需修改HTML，直接调整原有CSS #

给原.code-img添加相关属性，修正元素尺寸计算和图片自适应规则：

.code-img {
  background-color: #66BFBF;
  border-radius: 100%;
  padding: 30px;
  width: 20%;
  box-sizing: border-box; /* width包含padding和border的宽度，保证尺寸计算符合预期 */
  aspect-ratio: 1/1; /* 强制元素为正方形，圆角呈现为正圆 */
  object-fit: contain; /* 让GIF等比例缩放，完整显示在内容区域内，不会溢出被裁剪 */
}

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