html - 仅在 y 索引中溢出图像

Question

我有一个迷你图片库，我想根据点击的图片来切换内容。当悬停在图像上时，它会稍微放大。我的问题是，缩放时我想隐藏页面的溢出，但仍显示 y 方向的溢出。我试过 overflow-x: hidden, overflow-y: visible 但 y-overflow 只出现在底部，滚动条出现。

#images {
        height: 70vh;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        overflow-x: hidden;
        overflow-y: visible;
    }
    #images .image {
        width: 50%;
        height: 35vh;
        transition: 0.5s;
        cursor: pointer;
        z-index: 1;
    }
    #images .image:hover {
        transform: scale(1.1);
        z-index: 10;
    }
    #images .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    <div id="images">
       <div class="image">
          <img src="image.jpg">
       </div>
       <div class="image">
          <img src="image.jpg">
       </div>
       <div class="image">
          <img src="image.jpg">
       </div>
       <div class="image">
          <img src="image.jpg">
       </div>
    </div>

有没有一种方法可以使它们像在 x 方向上没有出现滚动条的情况下那样没有溢出？

Answer 1

您需要为图像添加缩放属性而不是外部 div。

#images {
        height: 70vh;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        overflow-x: hidden;
        overflow-y: visible;
        
    }
    #images .image {
        width: 49%;
        height: 35vh;
        transition: 0.5s;
        cursor: pointer;
        z-index: 1;
        overflow: hidden;
        position: relative;
        border:1px solid #000;
    }
    #images .image:hover img {
      transform: scale(1.1);
      z-index: 10;
      position: absolute;
      left: 0;
      transition: .2s;
    }
    #images .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    <div id="images">
       <div class="image">
          <img src="https://dummyimage.com/600x400/ffffff/000000">
       </div>
       <div class="image">
          <img src="https://dummyimage.com/600x400/ffffff/000000">
       </div>
       <div class="image">
          <img src="https://dummyimage.com/600x400/ffffff/000000">
       </div>
       <div class="image">
          <img src="https://dummyimage.com/600x400/ffffff/000000">
       </div>
    </div>