[分享]css不让图盒子缩放保持比例

CSS中的backgroundsize属性可以用于指定背景图像的大小。 在一些情况下，可能希望背景图像以不同的方式缩放以适应元素的大小，但有时候我们需要保持背景图像的比例。 那么我们该怎么做呢？.bo...

CSS中的background-size属性可以用于指定背景图像的大小。 在一些情况下，可能希望背景图像以不同的方式缩放以适应元素的大小，但有时候我们需要保持背景图像的比例。 那么我们该怎么做呢？

.box {
  width: 300px;
  height: 200px;
  background-image: url("example.jpg");
  background-repeat: no-repeat;
  background-size: contain;
} 

在上面的代码中，我们将背景图像指定为example.jpg，并将background-size属性设置为contain。 该属性值会将背景图像更改为按比例缩放，以适应元素的大小，并在元素内部重复背景图像，以填充其整个区域。

如果我们想让背景图像填充元素的整个区域，而不改变背景图像的比例，则可以将background-size属性设置为cover。

.box {
  width: 300px;
  height: 200px;
  background-image: url("example.jpg");
  background-repeat: no-repeat;
  background-size: cover;
} 

通过使用这些技巧，我们可以让我们的元素有一个具有比例的背景图像而不会失真或变形。