[分享]css不等比例缩放

在网页设计中，我们经常会使用图片来丰富页面内容。然而，当我们需要对图片进行缩放以适应不同的屏幕尺寸时，我们一般会使用CSS的缩放功能。然而，有时候我们需要对图片进行不等比例缩放，即保持图片的宽高比不变...

在网页设计中，我们经常会使用图片来丰富页面内容。然而，当我们需要对图片进行缩放以适应不同的屏幕尺寸时，我们一般会使用CSS的缩放功能。

然而，有时候我们需要对图片进行不等比例缩放，即保持图片的宽高比不变的情况下，只改变其中一维的大小，而不是同时改变宽和高。如果直接使用CSS的缩放功能，则会导致图片失真变形。

/* 直接使用CSS的缩放功能 */
img {
   width: 50%;
   height: 50%;
   /* 等同于 transform: scale(0.5); */
} 

此时，我们可以使用background-size属性实现不等比例缩放，具体实现方式如下：

/* 使用background-size实现不等比例缩放 */
div {
   width: 300px;
   height: 200px;
   background-image: url("example.jpg");
   background-size: 100% auto; /* 保持宽高比不变 */
   background-repeat: no-repeat;
} 

在这个例子中，我们设置了一个div元素的宽度为300px、高度为200px，并将其背景图片设置为"example.jpg"。而background-size属性的值"100% auto"则表示将图片的宽度设置为div的宽度，将高度保持原有的宽高比不变。

通过这种方法，我们可以轻松地实现不等比例缩放，而不会让图片失真变形。