使用Flexbox和object-fit可创建自适应图片画廊。1. 设置容器display: flex、flex-wrap: wrap实现自动换行；2. 子项设flex: 1 1 200px使图片最小宽200px并可伸缩；3. 设height和object-fit: cover确保图片保持比例且填满区域；4. 可选aspect-ratio统一显示比例；5. 用gap控制间距，justify-content: center居中对齐。
要用CSS制作一个自适应的图片画廊布局，并确保图片保持原有比例，可以结合 Flexbox 的 flex-wrap 和 object-fit 属性来实现。这种方法无需JavaScript，响应式强，兼容性好。
使用 flex-wrap 实现自动换行布局
通过设置容器为 Flexbox 布局并启用换行，可以让图片在不同屏幕尺寸下自动排列成多行。
关键代码：- 给父容器设置
display: flex和flex-wrap: wrap，让子项在空间不足时自动换行。 - 每个图片项设置相对宽度（如
flex: 1 1 200px），表示最小宽度约为200px，可伸缩以填充容器。
示例HTML结构：
<div class="gallery"> <img src="image1.jpg" alt="图片1"> <img src="image2.jpg" alt="图片2"> <img src="image3.jpg" alt="图片3"> <!-- 更多图片 --> </div>
CSS样式：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px; /* 图片之间留白 */
padding: 10px;
}
<p>.gallery img {
flex: 1 1 200px; /<em> 弹性增长，基础宽度200px </em>/
height: 150px; /<em> 固定高度，由 object-fit 控制裁剪 </em>/
object-fit: cover; /<em> 保持比例并填满容器 </em>/
border-radius: 8px;
transition: transform 0.2s;
}</p><p>.gallery img:hover {
transform: scale(1.05);
}用 object-fit 保持图片比例
object-fit: cover 是关键，它能让图片在不拉伸变形的前提下，完整覆盖设定的宽高区域。
-
cover：保持宽高比，裁剪多余部分以填满容器。 -
contain：完整显示图片，但可能留白。 - 推荐使用
cover配合固定高宽，视觉更统一。
如果希望高度自适应，也可以将 height 改为 min-height 或结合 aspect-ratio 设置固定比例：
.gallery img {
flex: 1 1 200px;
aspect-ratio: 4 / 3; /* 统一图片显示比例 */
object-fit: cover;
width: 100%;
height: auto;
}适配移动端的小技巧
- 使用
gap而不是外边距，避免最后一行对齐问题。 - 给
.gallery添加justify-content: center可让不满一行的图片居中。 - 在小屏幕上，图片会自动收缩到单列，依然美观。
基本上就这些。利用 flex-wrap 实现流式布局，配合 object-fit 控制图片渲染方式，就能做出简洁、自适应、不失真的图片画廊。不复杂但容易忽略细节。
