当 object-ft:cover 和 object-position: center top 时如何在网格内滚动图像的高度

如何解决当 object-ft:cover 和 object-position: center top 时如何在网格内滚动图像的高度

我使用 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 也是弹性的

.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) 设置为适合对象：覆盖对象位置：居中顶部

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

解决方法

您需要在悬停类和图像上使用 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

,

根据 Shiva Kumar 的回答，我做了以下事情：

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

.portfolio_columns:hover .portfolio_image {
  height: auto;
  align-self: start;
}