html中如何设置图片填充

在 HTML 中，图片可以使用标签来插入。当图片的尺寸与其所在的容器不匹配时，我们可以设置图片的填充方式来使之适应容器大小。

在 CSS 中，可以使用以下属性来设置图片的填充方式：

  /* 保持图片原有比例缩放，直到容器能够完全包含 */
  object-fit: contain;

  /* 拉伸图片以填充整个容器 */
  object-fit: fill;

  /* 保持图片原有比例缩放，使其完全覆盖容器 */
  object-fit: cover;

  /* 让图片按原比例平铺 */
  object-fit: none;

  /* 在图片居中并根据容器宽高比例自适应放缩图像 */
  object-fit: scale-down;

此外，还可以使用background-image属性将图片作为背景图像来显示，并使用background-size属性来设置填充方式：

  .bg-image {
    background-image: url("your-image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }

通过设置以上属性，我们可以让图片适应不同大小的容器并显示出最佳的效果。