如何在同一Div中完整展示图片，实现Behance网格样式？

核心思路 #

Behance的网格布局核心是让图片保持原始比例完整显示，同时自动填充容器，避免裁剪或尺寸错乱，可以通过CSS Grid结合object-fit: contain+动态列数配置实现。

代码实现 #

HTML结构 #

<!-- 列数设置表单 -->
<div class="column-config">
  <label>设置列数：</label>
  <select id="column-picker">
    <option value="2">2列</option>
    <option value="3" selected>3列</option>
    <option value="4">4列</option>
  </select>
</div>

<!-- 图片展示网格容器 -->
<div class="image-grid" id="image-grid">
  <div class="image-card">
    <img src="your-image-1.jpg" alt="展示图片1">
  </div>
  <div class="image-card">
    <img src="your-image-2.jpg" alt="展示图片2">
  </div>
  <!-- 更多图片卡片 -->
</div>

CSS样式 #

.image-grid {
  display: grid;
  gap: 1.2rem;
  padding: 1rem;
  width: 100%;
}

.image-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  min-height: 180px;
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 关键：完整显示图片，保留原始比例 */
}

/* 不同列数的网格模板 */
.image-grid.col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.image-grid.col-3 {
  grid-template-columns: repeat(3, 1fr);
}

.image-grid.col-4 {
  grid-template-columns: repeat(4, 1fr);
}

JavaScript交互（响应列数设置） #

const columnPicker = document.getElementById('column-picker');
const imageGrid = document.getElementById('image-grid');

// 初始化应用默认列数
imageGrid.classList.add(`col-${columnPicker.value}`);

// 监听列数选择变化
columnPicker.addEventListener('change', () => {
  // 移除旧列数类
  const oldColClass = Array.from(imageGrid.classList).find(cls => cls.startsWith('col-'));
  if (oldColClass) imageGrid.classList.remove(oldColClass);
  // 添加新列数类
  imageGrid.classList.add(`col-${columnPicker.value}`);
});

关键说明 #

• object-fit: contain：确保图片在容器内完整显示，多余容器空间用背景填充（可按需调整背景色），彻底解决裁剪问题。
• CSS Grid的repeat(n, 1fr)：让每列宽度均等分配，自动适配容器宽度，保证布局整齐。
• 动态列数切换：通过监听表单选择，实时更新网格的列数配置，匹配用户设置。

效果对比 #

原问题痛点：同一容器内不同尺寸图片要么被裁剪，要么尺寸混乱
实现后效果：所有图片完整显示、比例不变，网格布局整齐适配容器，与Behance展示效果一致

内容的提问来源于stack exchange，提问作者joaquin lucero