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

Posted 2023-02-23

【中文标题】当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

【发布时间】：2021-07-11 09:39:54

【问题描述】：

我使用 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"  srcset="">
            </div>
            <div class="portfolio_columns">
                <img class="portfolio_image" src="./Resources/images/image2.jpg"  srcset="">
            </div>
            <div class="portfolio_columns">
                <img class="portfolio_image" src="./Resources/images/image3.jpg"  srcset="">
            </div>
            <div class="portfolio_columns">
                <img class="portfolio_image" src="./Resources/images/image4.jpg"  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) 设置为 object-fit: cover with object-position: center top

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

【参考方案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

【讨论】：

太棒了。谢谢！有什么办法可以隐藏垂直滚动条同时仍然允许垂直滚动？

您可以使用scrollbar-with 和track 属性来隐藏滚动条。请务必谨慎，因为并非所有浏览器都支持此功能。可以关注中链接Scrollbar hide

在测试时 - 这会切断图像的顶部并将图像的顶部置于滚动的最高范围之上。此外，当用户将鼠标悬停在图像上时，高度会减小然后增加，从而创建不需要的动画。

在隐藏滚动条方面，您的解决方案隐藏了全局滚动条，而不仅仅是画廊图像的滚动条。我只需要隐藏图像的滚动条。

@JessicaRyan，您可以将 scrollbar-width 属性应用于 porfolio-columns 类，然后它将隐藏该 div 的滚动条。您也可以在我的 codepen 链接中签出相同的内容。

【参考方案2】：

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

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


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