当我们在网站中使用图片时，常会遇到一个问题，那就是图片会变形或失真。这个问题很讨厌，因为它会影响到网站的整体效果。但是使用CSS的方法来使图片不失真，会非常有用。

img {
max-width: 100%;
height: auto;
}

上面的代码块是利用 CSS 的一个属性 max-width。通过这个属性，我们避免了图片破裂或失真的问题。 这是因为我们在给 img 标签加了一个最大宽度为 100% 的 max-width 属性。

当图片超过了 img 标签所在的父级元素的宽度时，CSS 会自动将图片的宽度缩小，从而使图片适应所在区域的大小。这个属性同时会影响到图片的高度。因为我们也给图片的高度加了一个自适应的属性 height: auto。这样就可以避免图片失真问题。

除了以上这种入门级的方法之外，还有很多其他的方法可以使图片保持原有的比例和大小。例如，我们还可以使用 background-size、object-fit 或 img { width: 100%; height: auto; } 这个属性。

img {
width: 100%;
height: auto;
}

最后，小编提醒大家，当我们在制作网站时，记得一定要对图片进行压缩处理。这样可以减少图片的大小，从而提高网页的加载速度，同时也能减轻服务器的负担。