时间戳

首页 > 解决方案 > 仅在 y 索引中溢出图像

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

问题描述

我有一个迷你图片库，我想根据点击的图片来切换内容。当悬停在图像上时，它会略微放大。我的问题是，缩放时我想隐藏页面外的溢出，但仍显示 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 方向上没有出现滚动条的情况下没有溢出一样？

标签： htmlcssoverflow

解决方案

您需要将缩放属性添加到图像而不是外部 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>

推荐阅读