在flexbox中对图像的缩放效果(Scale effect on image inside a 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> 
  
 
I am trying to have a scale effect on the image inside a flex box. Once the scale effect is applied, the image grows out of the flexbox. I would like the image to scale by staying within the flexbox area. I tried to apply overflow: hidden but it did not work. Below is the code snippet:
 
 
 
  
  
  

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

                
最满意答案
                
                    
                        
 您应该使用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> 
  
 
You should use overflow:hidden on the thumbnail-container and there is no point animating the background when you are adding the image directly
 
and also the scale should be applied on the image and not the container
 
see solution:
 
 
 
  
  
.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>