Question

我试图对弹性框内的图像产生缩放效果。应用缩放效果后，图像会从flexbox中生长出来。我想通过保持在弹性箱区域内来缩放图像。我试图申请overflow: hidden但它没有用。以下是代码段：

＆＃13;

  

.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);
    }
}

＆＃13;

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

＆＃13;

Answer 1

您应该在缩略图容器上使用overflow:hidden，并且在直接添加图像时没有动画背景动画

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

见解决方案：

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

对flexbox内部图像的缩放效果

1 个答案: