CSS新手求助：div容器内图片无法适配且重复显示如何解决

背景图场景（background-image引入的图片） #

重复显示是background-repeat属性默认值为repeat导致的，适配问题可通过background-size、background-position调整，参考样式：

.your-div-class {
  /* 关闭图片重复 */
  background-repeat: no-repeat;
  /* 图片适配规则，按需三选一 */
  background-size: cover; /* 图片完全覆盖div，超出部分裁切 */
  /* background-size: contain; 图片完整展示在div内，不足部分留空白 */
  /* background-size: 100% 100%; 拉伸图片完全铺满div，不等比缩放 */
  /* 图片在div内居中显示 */
  background-position: center center;
}

标签场景（div内嵌套img元素） #

该场景一般不会出现重复问题，若有重复优先检查是否写了多个img标签，适配参考样式：

/* 适配父div宽度，高度等比缩放，不会溢出 */
.your-div-class img {
  max-width: 100%;
  height: auto;
}
/* 如果需要图片完全铺满div，用下面的样式 */
.your-div-class img {
  width: 100%;
  height: 100%;
  /* 适配规则按需三选一 */
  object-fit: cover; /* 覆盖div，超出裁切 */
  /* object-fit: contain; 完整展示，留空白 */
  /* object-fit: fill; 拉伸铺满 */
}

如果样式不生效，可检查是否有更高优先级的全局样式覆盖了当前规则，可给属性加!important临时测试定位问题。

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