调整大小和缩放是同义词

调整大小是图像大小的内在变化。将图像大小从 1000 像素更改为 500 像素就是调整大小。

如果您将大小从 100% 更改为 50%，或者 2:1 正在缩放……这与以前相同。

调整大小通常在图像处理程序上执行，例如 Gimp 或 Photoshop。

这种调整大小不仅会影响图像的实际大小，还会影响其重量。

但不总是

但缩放也可能意味着它仅按比例渲染。例如，一个 3000 像素高度的图像无法在您的屏幕上显示，并且仅以 1000 像素高度呈现全屏。但是您图像的实际尺寸根本没有改变。它只是以这种方式显示。

当您在网页的样式表上定义图像的大小时，就会出现这种情况。无论图像的实际像素大小如何，它们都以一定的大小显示。

你可以定义

img src="photo.jpg" style="width: 50%"

图像将以照片大小（以像素为单位）的 50%（缩放）进行渲染。但照片将保留其原始像素。

当您使用此网页上的滚动来放大和缩小时，您是在缩放，而不是在调整大小。

纵横比

是宽高的关系。

可能有两种选择。使图像变形、压扁或压扁图像或仅保留图像元素的内部比例的纵横比。

一张正方形图像的纵横比为 1:1

这是一个宽高比为 2:1 的图像（宽度第一，高度第二）

但是我们这里不喜欢使用小数，所以我们没有 1.5:1 的纵横比，而是将它们乘以 2 得到 3:2

全高清壁纸的宽高比为 16:9。垂直位置的手机 9:16

请注意，纵横比不关心图像的尺寸。一张图片可以有 100x100 像素，而另一张图片可以有 500x500 像素。两者具有相同的纵横比 1:1。

在某些情况下，您指的是图像的内部纵横比。

在这种情况下，图像被挤压。2:1

在某些文件格式中，尤其是视频，纵横比保存在图像中，因此可以在之后对其进行解压。（注意拉长的矩形像素。（我夸大了它们）

裁剪

它只是剪切图像的外部部分。但你可以做对或错。

这是我们需要切割成宽高比为 1:1（正方形）的源图像

不……你做错了……

当您手动选择取景时，您不仅在裁剪，而且在……重新取景。

CSS

CSS 为您提供了一些可能以多种方式影响图像的工具。这里有一些例子。

img {宽度：100%;}

这将缩放图像（如果它的自然尺寸不适合）以适合给定的空间，例如，您的整个窗口。

img {宽度：100%; 高度：100%；}

这可能会使您的图像变形，因为无论其原始比例如何，它都会迫使您的图像被挤压到屏幕上，从而改变纵横比。

div {宽度：100px; 高度：100px；溢出：隐藏；}

div>img {宽度：200px; 高度：200 像素；}

这将裁剪 div 内的图像......好吧，只是它的显示方式。

有很大的空间可以发挥和结合。但是尽量不要扭曲图像......看起来真的很不专业。

原图；https://cdn.pixabay.com/photo/2016/03/23/04/01/beautiful-1274056_1280.jpg

裁剪是当您删除部分图像并专注于较小的部分时，请参见下文。

调整大小和缩放是一回事，这意味着保留整个图像并使其更小。例如，它可能是 900x600 像素，您将其按比例缩小（或调整大小）到 800x533 像素。按比例表示在缩放时双方都在改变。

更改纵横比也是调整大小，但仅在单个轴上。所以你把你的 900x600 像素的图像加长到 1200x600 像素。这可能会损坏某些图像，例如。一个圆形将变成一个省略号。拉伸图像以适应某些东西通常会改变纵横比，因此拉伸实际上会使图像变形。

裁剪是指去除图像的外部以改善取景。调整大小意味着增加或减小图像的大小。