css图片自适应盒子大小

CSS图片自适应盒子大小通常通过设置`width`和`height`属性为`auto`或者百分比来实现。这样，图片会根据其原始尺寸或容器的大小自动调整其大小，保持宽高比。以下是几种常见的方法：

1. **宽度自适应高度**:

   img {
      width: 100%; /* 或者留空不写，让宽度自动适应 */
      height: auto; /* 保持原始比例 */
   }

2. **宽度和高度都自适应**:

   img {
      max-width: 100%;
      max-height: 100%;
      height: auto;
      object-fit: cover; /* 如果需要保持填充整个容器 */
   }

`object-fit: cover` 会让图片填充容器并保持纵横比，如果超出则裁剪；`contain`会让图片尽可能大但不会超出容器，保持比例。

3. **响应式布局** (如使用媒体查询)：
对于不同屏幕尺寸，可以设置不同尺寸的图片：

   @media (max-width: 600px) {
      img {
         width: 100%;
         height: auto;
      }
   }

相关问题：
1. 如何在移动端适配图片大小？
2. CSS中`object-fit`属性有哪些可用值？
3. 响应式设计中如何针对不同设备设置图片尺寸？