仅用CSS/HTML实现图片从屏幕中心向外排列而非单侧

核心思路 #

利用CSS布局的居中特性，结合媒体查询控制两侧次要图片的显示/隐藏，让核心图片始终锚定在视口中线位置，实现屏幕缩小时从两侧同步移除图片、放大时从两侧同步添加的效果。

具体实现步骤 #

1. HTML结构设计 #

按「左侧次要图-核心图-右侧次要图」的顺序排列，给核心图单独加类，两侧次要图分别标记分组：

<div class="image-container">
  <img class="img-left" src="左侧次要图1.jpg" alt="左侧次要图1">
  <img class="img-left" src="左侧次要图2.jpg" alt="左侧次要图2">
  <img class="img-core" src="核心图.jpg" alt="核心图">
  <img class="img-right" src="右侧次要图1.jpg" alt="右侧次要图1">
  <img class="img-right" src="右侧次要图2.jpg" alt="右侧次要图2">
</div>

2. Grid布局实现（推荐） #

用CSS Grid的居中能力固定核心图位置，配合媒体查询控制两侧元素可见性：

.image-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, auto));
  place-content: center;
  gap: 12px;
  padding: 16px;
}
/* 强制核心图占据中线位置，避免被挤压 */
.img-core {
  grid-column: center;
  width: 200px;
  height: auto;
  flex-shrink: 0;
}

/* 最小宽度：仅显示核心图 */
@media (max-width: 420px) {
  .img-left, .img-right {
    display: none;
  }
}
/* 中等宽度：显示核心图+左右各1张次要图 */
@media (min-width: 421px) and (max-width: 720px) {
  .img-left:nth-child(2), .img-right:nth-child(5) {
    display: none;
  }
}
/* 宽屏：显示所有图片 */
@media (min-width: 721px) {
  .img-left, .img-right {
    display: block;
  }
}

3. Flexbox替代方案 #

如果更习惯Flex布局，通过justify-content: center锚定核心图，配合媒体查询控制两侧元素：

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
}
.img-core {
  flex-shrink: 0;
  width: 200px;
  height: auto;
}

/* 媒体查询逻辑和Grid方案一致，控制对应.img-left/.img-right的display属性 */
@media (max-width: 420px) {
  .img-left, .img-right {
    display: none;
  }
}
@media (min-width: 421px) and (max-width: 720px) {
  .img-left:nth-child(2), .img-right:nth-child(5) {
    display: none;
  }
}

关键注意事项 #

• 给核心图设置固定尺寸或flex-shrink: 0，防止被两侧图片挤压变形
• 媒体查询的断点要根据图片实际尺寸调整，保证布局切换时无跳变
• 所有次要图建议统一基础尺寸，提升布局一致性

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