如何给GIF背景设置全边border-radius且保留background-size:contain属性

问题原因 #

你遇到的左侧圆角不生效的问题，本质不是border-radius属性失效：承载GIF的.img容器默认占满了父级col-5的全部列宽，而GIF作为背景图设置了background-size: contain自适应比例+center right靠右对齐，实际显示区域只占了容器的右侧部分，容器左侧是无内容的空白区域，和页面背景同色，视觉上就看不到左侧的圆角。

注：你当前行内样式中重复设置了background-size，带!important的contain优先级更高，后续的cover属性不会生效，无需额外调整。

可行解决方案（均无需修改background-size: contain!important属性） #

方案1：固定容器尺寸适配GIF（推荐，适合GIF宽高已知的场景） #

你当前使用的GIF宽度为240px，直接给.img元素添加宽度和对齐规则，让容器尺寸和GIF完全匹配：

.half-half-image-text .img {
  width: 240px;
  margin-left: auto; /* 保持GIF在列内靠右对齐的效果不变 */
}

修改后容器仅占据GIF显示的240px宽度，四个圆角都会作用在GIF可视区域，不会出现空白边。

方案2：自适应适配（适合GIF尺寸不固定的场景） #

如果GIF的尺寸不固定，可以调整背景定位逻辑，配合背景色适配实现圆角全显示：

1. 将.img元素背景定位属性从center right修改为center center居中对齐
2. 给.img添加和页面背景一致的背景色，避免空白区域露出：

.half-half-image-text .img {
  background-color: #ffffff; /* 替换为你的页面实际背景色 */
}

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