现在，越来越多的网站都会使用图片，而为了使图片在不同设备上的显示效果更好，我们需要对它们进行自适应长宽的处理。
幸好， CSS 提供了几种方法来使图片自适应长宽。让我们来看看这几种方法：
1. 使用max-width
通过使用max-width属性，图片将会在其实际大小和其所在容器的大小之间取一个较小值。
例如：
pre{
max-width: 100%;
}
这个代码段会将图片的最大宽度设置为其所在容器的 100%。
2. 使用width和height
使用width和height属性，我们可以明确告诉浏览器图片的大小，让图片按照指定的比例来进行缩放。
例如：
pre{
width: 100%;
height: auto;
}
这个代码段将图片的宽度设置为其所在容器的 100%，高度会根据图片的比例自动进行缩放。
值得注意的是，这种方法可能会对图片的质量产生影响。缩放的过程中，图片的像素可能出现失真或变形，导致图片变得模糊或者不清晰。
3. 使用object-fit
使用object-fit属性，我们可以指定图片的尺寸适应方式。其有以下几种取值：fill（将图片拉伸至填满所在容器）、contain（使图片在所在容器内等比例缩放，保证图片能够完全显示）、cover（使图片缩放并裁剪，保证图片填满所在容器）、none（保持图片原有大小，不进行缩放）等。
例如：
pre{
width: 100%;
height: 100%;
object-fit: contain;
}
这个代码段将图片缩放至适应其所在容器，并且保证图片能够完全显示。
总之，在进行图片自适应长宽处理时，我们需要根据实际需求选择不同的方法。以上三种方法，各有优缺点，需要结合实际情况进行选择。