图片显示样式

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

全文共 950 字，阅读约需 3 分钟

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

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

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

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

📝 NOTE

这是一个提示框，下面会有一张图片。

💡 TIP

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

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

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

📝 NOTE

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

横向图片（宽度大于高度）：

纵向图片（高度大于宽度）：

测试超出最大高度限制的图片（原始尺寸400x800px）：

💡 TIP

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

新的图片样式特点：

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

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