layout引用图片，图片自适应窗口大小

在网页布局中，通过CSS来引用图片并实现自适应窗口大小，通常是利用CSS的几种关键特性。这里有几个常见的方法：

1. **Max-width 设置**：给图片元素添加`max-width: 100%`的样式，它会让图片的最大宽度占据容器（比如`.layout`）的100%，同时保持原始的宽高比，这样图片会随着容器的大小变化而缩放，但不会超出其本身的比例。

.layout img {
   width: auto;
   max-width: 100%;
   height: auto; /* 或者height: auto; overflow: hidden; 如果希望溢出部分隐藏 */
}

2. **Background 图片**：如果你想要背景图而不是普通图像，可以使用`background-size: cover`来确保背景图完全填充容器，并保持纵横比。如果需要平铺，则可以设置为`background-size: contain`。

.layout {
   background-image: url("your-image.jpg");
   background-size: cover;
}

3. **Retina 屏幕支持**：对于高分辨率设备，可以使用`srcset`属性配合`sizes`属性来提供不同分辨率的图片版本，以便根据用户设备自动选择合适的图片。

<div class="layout">
   <picture>
      <source sizes="(min-width: 600px) 100vw" srcset="high-res@2x.jpg">
      <img src="regular-res.jpg" alt="图片描述">
   </picture>
</div>