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

Question

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

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

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

有没有人以前遇到过这个，你有什么建议我应该怎么做才能实现这个objective？

我的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 与我的 wrapper

宽度一致

.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;
}

Answer 1

您需要在悬停 class 时使用 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;
}

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

Answer 2

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

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

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

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

How to scroll height of image inside a grid when object-ft: cover and object-position: center top

html

css

scroll

flexbox

object-fit