赠送QQ音乐会员体验券【8月】

域名的断舍离

总是忍不住刷手机


## 图片显示测试

这篇文章用来测试博客中图片的显示效果。标题上方的特色图片保持原有样式，而内容中的图片应该以更合适的尺寸显示。

### 测试图片1 - 普通图片

下面是一张普通图片，应该以适中的尺寸居中显示：

![测试图片](/images/rainbow.png)

### 测试图片2 - 相同图片

再次显示相同图片，验证样式一致性：

![彩虹图片](/images/rainbow.png)

### 与文本混合

图片前后都有文本内容。这段文字在图片前面，用来测试图片与文本的间距是否合适。

![又一张测试图片](/images/rainbow.png)

这段文字在图片后面，同样用来测试间距效果。图片应该具有合适的圆角、阴影，并且在移动设备上能够响应式缩放。

### 提示框与图片结合

> [!NOTE]
> 这是一个提示框，下面会有一张图片。

![提示框后的图片](/images/rainbow.png)

> [!TIP]
> 图片的显示效果应该是：
> - 最大宽度限制在合理范围内
> - 在小屏幕上自适应缩放
> - 保持图片比例不变形
> - 居中显示
> - 有合适的圆角和阴影

### 多张图片连续显示

连续显示多张图片时的效果：

![第一张图片](/images/rainbow.png)

![第二张图片](/images/rainbow.png)

![第三张图片](/images/rainbow.png)

### 纵向图片测试

下面测试纵向图片（高度大于宽度）的显示效果：

![纵向测试图片](/images/Blog-img/lizhi.png)

> [!NOTE]
> 纵向图片的样式特点：
> - 最大高度限制为96（约384px）确保不会过高
> - 最大宽度为3xl（约672px）但纵向图片通常不会达到
> - 在移动设备上，最大高度调整为64（约256px）
> - 在小屏幕上进一步限制为48（约192px）
> - 保持图片比例，避免拉伸变形

### 横向与纵向图片对比

横向图片（宽度大于高度）：
![横向图片](/images/rainbow.png)

纵向图片（高度大于宽度）：
![纵向图片](/images/Blog-img/lizhi.png)

### 超高图片测试

测试超出最大高度限制的图片（原始尺寸400x800px）：
![超高图片](/images/tall-test.svg)

> [!TIP]
> 观察上面的超高图片：
> - 原始尺寸为400x800px，但被CSS限制为最大高度384px
> - 图片保持比例缩放，不会变形
> - 在移动设备上会进一步缩小
> - 这样确保页面布局的合理性

## 图片样式总结

新的图片样式特点：

1. **合适的尺寸**：最大宽度3xl（约672px），最大高度96（约384px）
2. **响应式设计**：在移动设备上自动缩放
   - 平板设备（768px以下）：最大高度64（约256px）
   - 手机设备（480px以下）：最大高度48（约192px）
3. **居中显示**：图片自动居中对齐
4. **保持比例**：使用object-contain保持图片比例
5. **美观效果**：圆角和阴影增加视觉效果，hover时轻微放大
6. **合适间距**：上下留有适当的边距

### 不同尺寸图片的适配

- **横向图片**：受最大宽度限制（3xl），高度自适应
- **纵向图片**：受最大高度限制（96），宽度自适应
- **正方形图片**：同时受宽度和高度限制，取较小值

这样的设置既保证了图片的可读性，又不会让图片占据过多的屏幕空间，无论是横向还是纵向的图片都能合理显示。


图片显示样式

测试博客中图片的显示尺寸和效果