html - flex 盒内图像的缩放效果

Question

我正在尝试对 flexbox 内的图像产生缩放效果。一旦应用了缩放效果，图像就会从 flexbox 中长出来。我希望图像通过留在 flexbox 区域内进行缩放。我尝试应用 overflow: hidden 但它没有用。下面是代码片段:

  

.imageContainer {
    display: flex;
    color: #fff;
    -webkit-box-flex: 0;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 8px;
    flex-basis: 32.33333333%;
    border: solid 1px red;
}
.imageContainer img {
    width: 100%;
    background-size: cover;
}
.thumbnail-container{
webkit-transition: background 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: background 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    
    &:hover{
        transform: scale(1.1);
    }
}

  <div class="imageContainer">
        <div class="thumbnail-container">
            <img src="https://upload.wikimedia.org/wikipedia/commons/5/55/Monkey_mustang.jpg">
        </div>
    </div>
    
     <div class="imageContainer">
        <div class="thumbnail-container">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Mustang_mario.jpg">
        </div>
    </div>

Answer 1

你应该在缩略图容器上使用overflow:hidden，当你直接添加图像时，动画背景是没有意义的

并且比例应该应用于图像而不是容器

查看解决方案:

.imageContainer {
  display: flex;
  color: #fff;
  -webkit-box-flex: 0;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 8px;
  flex-basis: 32.33333333%;
  border: solid 1px red;
}

.imageContainer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  webkit-transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.thumbnail-container {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
}

.thumbnail-container:hover img {
  transform: scale(1.1);
}

<div class="imageContainer">
  <div class="thumbnail-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/55/Monkey_mustang.jpg">
  </div>
</div>

<div class="imageContainer">
  <div class="thumbnail-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Mustang_mario.jpg">
  </div>
</div>