css图片适应屏幕分辨率

CSS技术为我们提供了一种灵活的方式，使得网页中的图像不会因为屏幕分辨率的变化而失真或变形。我们可以使用CSS中的background-size属性，以快速简便的方法实现图像自适应页面。

background-size: cover;

此属性值可以让CSS自动调整背景图像的大小，并让其尽可能的填充父元素的容器大小。我们可以将此属性应用于任何元素，例如div，section，article等等。

background-size: contain;

这个属性值可以确保背景图像始终保持完整，而不会被改变图像的比例或截断图像。但是，它也可能会导致图像在容器内留下空白的地方。

此外，我们还可以使用CSS单位vh和vw来定义背景图像的大小，vh和vw代表视口高度和视口宽度的百分比。如下所示:

background-size: 100vh 100vw;

这样可以确保图像始终填充整个视口，但是在小屏幕上可能会过于放大并导致图像失真。

综上所述，我们可以使用以上CSS技术来确保图像在不同的设备和屏幕分辨率下展示出最佳效果。