在前端开发过程中，经常需要对图片进行缩放和剪裁以适应不同的屏幕尺寸。本文介绍了一种基于 CSS 的方法，可以将任意长宽比的图片缩放到指定大小，并通过正方形居中剪裁实现美观的效果。
CSS 缩放图片
CSS 提供了 transform 属性，可以对元素进行旋转、缩放、平移等变换。其中，缩放变换通过 scale 函数实现。例如，以下代码将一个宽度为 100px、高度为 50px 的图片放大到原来的两倍：
--- - ---------- --------- -
这种方法有一个问题：如果原始图片的长宽比与目标显示尺寸的长宽比不同，缩放后的图片会出现畸变。例如，将一个宽高比为 2:1 的图片缩放到 100px × 100px 的大小，结果会是一个扁长的 100px × 50px 的图像。
为了避免这种情况，我们需要先确定图片要被缩放到的大小，然后根据图片的长宽比计算出最小缩放比例。例如，假设要将一个宽高比为 4:3 的图片缩放到 200px × 200px 的大小，可以使用以下 CSS 代码：
--- - ------ ------ ------- ------ ----------- -------- -
其中，width 和 height 属性指定了图片要被缩放到的大小。object-fit 属性控制了如何调整图像在容器中的尺寸和位置。contain 值表示保持长宽比不变的情况下，将整个图像缩放到容器内部。
正方形居中剪裁图片
上述方法可以将任意长宽比的图片缩放到指定大小，但是如果需要在一个正方形容器中显示图片，会出现两种情况：原始图片比较短，留下空白区域；原始图片比较长，超出容器范围。这时候，我们需要对图片进行剪裁，以适应容器的大小。
通常情况下，我们希望剪裁后的图片仍然保持重要内容可见，同时能填满容器。一种简单有效的方法是使用正方形居中剪裁（square center crop）技术。
该技术的思路是先将原始图片缩放到容器宽度或高度的最大值，然后从中心点开始截取正方形区域。例如，假设有一个 300px × 200px 的图片要显示在一个 200px × 200px 的容器中，可以使用以下 CSS 代码实现正方形居中剪裁：
---------- - ------ ------ ------- ------ --------- ------- - --- - -------- ------ ------- ----- ------- ----- ---------- --------------- ------ -
其中，.container 类定义了包含图片的容器。overflow: hidden 属性表示超出容器大小的部分将被隐藏。.container 的宽度和高度都设置为 200px，以便显示一个正方形区域。
对于 img 元素，我们不再手动设置宽度和高度，而是让其填满整个容器。这里使用了 height: 100% 属性，使得图片的高度等于容器的高度，并且保持长宽比不变。接下来，通过 transform 属性将图片向上和向
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30577