0

我使用 flex 创建了一个图片库。图像是调整每个图像宽度的列，以便画廊适合 flex 容器的宽度。当用户将鼠标悬停在图库中的图像上时，图像会增长并显示其完整大小。

图像被设置为 object-fit:cover 和 object-position: center top，因为这可以防止图像缩放以适应 flex 容器的高度，并且图像的顶部在悬停时显示。

但是，如果图像有垂直溢出，我希望用户能够在图像展开后滚动图像的高度。

有没有人遇到过这种情况，你对我应该做些什么来实现这个目标有什么建议吗？

我的 HTML 和 CSS 如下：

创建图片库

 <section class="portfolio_gallery">

            <div class="portfolio_columns">
                <img class="portfolio_image" src="./Resources/images/bluepinkandwhite.png" alt="" srcset="">
            </div>
            <div class="portfolio_columns">
                <img class="portfolio_image" src="./Resources/images/image2.jpg" alt="" srcset="">
            </div>
            <div class="portfolio_columns">
                <img class="portfolio_image" src="./Resources/images/image3.jpg" alt="" srcset="">
            </div>
            <div class="portfolio_columns">
                <img class="portfolio_image" src="./Resources/images/image4.jpg" alt="" srcset="">
            </div>

        </section>

.portfolio_gallery 是 flex 与我的包装器的宽度

.portfolio_gallery {
  display: flex;
  height: 80vh;
  max-width: 70vw;
  z-index: 2;
}

.portfolio_columns 也是 flex

.portfolio_columns {
  display: flex;
  flex: 1;
  position: relative;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  z-index: 2;
}

当用户将鼠标悬停在图像上时，它会增长以显示整个图像

.portfolio_columns:hover {
  flex-grow: 4;
}

画廊内的图像 (.portfolio_image) 设置为 object-fit: cover with object-position: center top

.portfolio_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
4

2 回答 2

1

您需要overflow-y: auto在悬停类和图像上使用悬停时将高度设置为自动。这是最终的解决方案。

.portfolio_columns:hover {
  flex-grow: 4;
  overflow-y: auto;
}

.portfolio_columns:hover .portfolio_image {
  height: auto;

}

编辑以修复图像高度过渡和图像切割使用以下内容：

.portfolio_columns:hover .portfolio_image {
  min-height: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

链接到我的代码笔最终结果：https ://codepen.io/shivakumarjakkani/pen/RwVGqbx

于 2021-07-11T10:27:49.967 回答
0

继 Shiva Kumar 的回答之后，我做了以下事情：

.portfolio_columns:hover {
  flex-grow: 4;
  overflow-y: auto;
}

.portfolio_columns:hover .portfolio_image {
  height: auto;
  align-self: start;
}
于 2021-07-11T11:39:25.130 回答