图片根据屏幕大小自动调整

实现图片根据屏幕大小自动调整的方法有多种，以下是其中的两种常见方式：

使用CSS的max-width属性

在CSS中，可以使用max-width属性来限制图片的最大宽度，从而实现图片根据屏幕大小自动调整。例如，可以将图片的max-width设置为100%，这样图片在小屏幕上会自动缩小，而在大屏幕上则不会超出屏幕宽度。

img {
  max-width: 100%;
}

使用响应式图片

响应式图片是指根据屏幕大小自动调整大小的图片。为了实现这种效果，可以使用HTML5的picture元素和source元素，为不同屏幕大小提供不同大小的图片。例如，下面的代码为小屏幕和大屏幕分别提供了不同大小的图片：

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(min-width: 601px)" srcset="large.jpg">
  <img src="small.jpg" alt="Responsive image">
</picture>

在小屏幕上，只会加载small.jpg这张图片；而在大屏幕上，则会加载large.jpg这张图片。这样可以避免在大屏幕上加载过大的图片，从而提高页面加载速度。