CSS 调整图像大小而不失真

在网页设计中，经常需要在页面中插入图片，而为了呈现更好的视觉效果，我们需要根据实际需要调整图片的大小。但是，当我们缩小或放大图片时，很容易出现失真的情况，影响美观度。本文将介绍如何使用 CSS 调整图片大小而不失真。

1.通过width和height属性调整大小

CSS 中的 width 和 height 属性可以用来调整图片的宽度和高度，可以设置为像素值、百分比等。但是，当我们只设定其中一个属性时，图片会按照比例自动缩放而失真。为了避免失真，我们需要同时设置 width 和 height 属性，并保证宽高比例与原图一致。

<img src="example.jpg" style="width: 500px; height: 300px;">

2.使用object-fit属性调整图片比例

CSS3 中的 object-fit 属性可以用来调整图片的比例，使其适应容器的大小而不影响视觉效果。该属性有以下几个取值：

• fill：拉伸图片以填充容器，可能会失真
• contain：缩小图片以确保所有内容都能显示，并保持纵横比
• cover：放大或缩小图片以填满容器，并保持纵横比，可能会裁切图片
• none：将图片按实际大小显示
• scale-down：内容比 contain 更小，则显示内容，反之则按 contain 处理

<img src="example.jpg" style="width: 500px; height: 300px; object-fit: cover;">

3.使用background-size属性调整背景图片大小

除了使用img标签插入图片，我们也可以使用 background-image 属性将图片设置为元素的背景，并使用 background-size 属性来调整背景图片的大小。与 object-fit 相似， background-size 也有以下几个取值：

• auto：原图大小
• cover：放大或缩小图片以铺满容器，可能会裁切图片
• contain：缩小图片以确保所有内容都能显示，并保持纵横比
• ：以给定长度为图片大小
• ：以百分比为图片大小

<div style="background-image: url('example.jpg'); background-size: cover; width: 500px; height: 300px;"></div>

以上就是使用 CSS 调整图片大小而不失真的方法，根据实际需求选择不同的属性值即可。这样既可以满足视觉效果的需求，又可以保证图片不会失真。