解决Flexbox图片画廊Hover时竖图留白问题

问题描述 #

使用HTML/CSS实现了基于Flexbox的图片画廊，当鼠标悬停竖版图片时，图片区域出现留白，原本期望通过object-fit: cover属性填充该空白区域，但未达到预期效果。

原代码 #

CSS代码

@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";

:root {
  --magnifier: 6;
  --gap: 1vmin;
  --transition: 0.5s;
}
  
.gallery {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}

.child {
  transition: flex var(--transition), filter var(--transition);
  height: 100%;
  flex: 1;
}

.child:hover {
  flex: var(--magnifier);
}

img {
  --brightness: 0.85;
  --grayscale: 1;
  height: 100%;
  filter: grayscale(var(--grayscale)) brightness(var(--brightness));
  object-fit: cover;
  overflow: hidden;
}

img:hover {
  --brightness: 1;
  --grayscale: 0;
}

HTML代码

<div class="gallery">
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/7604425/pexels-photo-7604425.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/4666748/pexels-photo-4666748.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/4932184/pexels-photo-4932184.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/4210900/pexels-photo-4210900.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/3126574/pexels-photo-3126574.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/1376201/pexels-photo-1376201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/2437291/pexels-photo-2437291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/1679772/pexels-photo-1679772.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/1183099/pexels-photo-1183099.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/1813513/pexels-photo-1813513.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/931018/pexels-photo-931018.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div>
 </div>

问题原因 #

留白出现的核心原因：

• .child和内部的<a>标签未设置宽度约束，默认宽度由内容决定，无法填满Flex分配的可用空间
• 图片仅设置了height: 100%，未设置宽度100%，导致竖版图片拉伸时，无法覆盖父容器的全部区域

解决方案 #

修改CSS，给.child、<a>标签添加宽度和块级显示属性，同时给图片设置宽度100%，确保图片能填满父容器并应用object-fit: cover：

@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";

:root {
  --magnifier: 6;
  --gap: 1vmin;
  --transition: 0.5s;
}
  
.gallery {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}

.child {
  transition: flex var(--transition), filter var(--transition);
  height: 100%;
  flex: 1;
  width: 100%; /* 填满Flex分配的宽度 */
}

.child a {
  display: block; /* 转换为块级元素，消除默认行内间距 */
  height: 100%;
  width: 100%; /* 填满父容器宽度 */
}

.child:hover {
  flex: var(--magnifier);
}

img {
  --brightness: 0.85;
  --grayscale: 1;
  height: 100%;
  width: 100%; /* 填满父容器宽度 */
  filter: grayscale(var(--grayscale)) brightness(var(--brightness));
  object-fit: cover;
}

img:hover {
  --brightness: 1;
  --grayscale: 0;
}

效果说明 #

修改后，鼠标悬停竖版图片时，图片会填满.child容器的整个空间，通过object-fit: cover裁剪图片适配容器尺寸，不再出现留白，同时保留原有的悬停放大和滤镜切换效果。

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