css图片固定尺寸自适应

在设计网站时，我们需要大量的图片来展示和装饰页面，但是不同设备的屏幕尺寸和分辨率不同，如何让图片在不同设备上能够保持固定尺寸并自适应成为了一个重要的问题。

为了解决这个问题，我们可以使用CSS来设置图片的尺寸。其中一个用得最多的方法就是使用max-width属性，它可以让图片在保持原始宽高比的情况下，自动缩小以适应父容器的宽度。

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

上面的代码中，max-width属性设置为100%，表示图片的最大宽度不超过父容器的宽度，而height属性设置为auto，则表示高度会根据宽度自动调整。

如果我们想让图片保持固定宽度和高度，可以使用object-fit属性，它可以控制图片如何适应容器大小。下面是一个例子：

.container {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

上面的代码中，.container是图片的父容器，设置了宽度和高度为300px，而img标签的宽度和高度都设置为100%，使得图片与父容器大小相同。object-fit属性设置为cover，则表示图片会保持原始宽高比的情况下，缩放以完全填充容器。

总结一下，我们可以使用max-width属性使图片自适应容器大小，也可以使用object-fit属性设置图片的尺寸。这些方法可以让我们轻松地处理不同屏幕尺寸和分辨率下的图片显示问题。