Question

如何使背景图像适合特定尺寸的div内。我尝试使用object-fit属性，但没有运气。谁能帮忙吗？

.image {
  width: 100px;
  height: 50px;
  border: 1px solid red;
  background-image: url("https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y");
}

<div class="image"></div>

Answer 1

您可以通过多种方式执行此操作，然后选择最适合自己的方式。

使用背景尺寸

您可以background-size: contain;这样background-url来拉伸图像而无需剪切，也可以使用background-repeat: no-repeat;来使宽高比适合您的图像

还使用background-size仅在容器中一次显示图像。

详细了解.image { width: 100px; height: 50px; border: 1px solid red; background-size: contain; background-image: url("https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"); } here

运行摘要以查看其工作情况。

<div class="image"></div>

height

使用背景尺寸和高度和宽度

您最多可以将图像的width和100%设置为.image { width: 100px; height: 100px; border: 1px solid red; background-size: 100% 100%; background-image: url("https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"); }

<div class="image"></div>

line-clamp: 2 "...123 T.";

Answer 2

查看属性div.image { background-image: url('https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y'); background-repeat:no-repeat; background-size:contain; height: 50px; width: 100px; border: 1px solid red; } https://www.w3schools.com/cssref/css3_pr_background-size.asp

<div class="image"></div>

{
  "BarcodeBase" : {
    "Pepsi" : {
      "Pepsi Black" : {
        "barcode" : "4820036487899",
        "namebar" : "Pepsi Black"
      },
      "Pepsi Chery" : {
        "barcode" : "4820036487789",
        "namebar" : "Pepsi Chery"
      }
    }
  },
  "users" : {
    "4WZ8sYdLfNeNTDH7t0JZXKbNdmF2" : {
      "company" : "Pepsi",
      "email" : "test@gmail.com",
      "id" : "4WZ8sYdLfNeNTDH7t0JZXKbNdmF2"
    }
  }
}

使用CSS中的背景图片使图片适合div

2 个答案: