从四面八方缩放图像

Question

这可能是一个愚蠢的问题，但我已经为此苦苦挣扎了几个小时...

我需要在悬停时从各个方向放大图像。目前我的图像仅从右侧缩放。

我用bootstrap.

缩放前的图像：

图像缩放：

我认为这是显示问题，但我不知道如何解决。

奖金问题：我想在悬停时显示的图像底部固定一个小框，有点像 netflix。有什么想法吗？

非常感谢

.grid{
  padding-top: 10px;
  background-color: white;
  }
.mini{
  height: 150px ;
  justify-content: flex-center;
  position: absolute;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.a{
  margin: 25px;
  align-items: center;  
  display: flex;
 }
 .mini:hover{
  height: 250px;
  z-index: 5;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
 }

<div class="container-fluid grid">
   <div class="row mt-5 r">
     <div class="col a r"><img src="images/1.jpg" class="mini"></div>
     <div class="col a r"><img src="images/2.jpg" class="mini"></div>
     <div class="col a r"><img src="images/3.jpg" class="mini"></div>
     <div class="col a r"><img src="images/4.jpg" class="mini"></div>
   </div>
</div>

Answer 1

这可能有助于解决缩放图像问题

.wrapper-content {
    display: flex;
    padding: 0;
    width: 100%;
    max-width: 1160px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.wrapper-image img {
    height: 100%;
    width: auto;
    transition: 0.5s;
}

.wrapper-image{
    overflow: hidden;
}
.wrapper-image {
    width: 200px;
    height: 300px;
    margin: 0;
}
.wrapper-image:hover img {
    transition: 0.5s;
    transform: scale(1.1);
}

<div class="container">
   
    <div class="wrapper-content">
   
        <div class="wrapper-image">
          <img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1352&amp;q=80">
        </div>
      

      </div>
      
    </div>

从四面八方缩放图像

Scale image from all sides

html

css

image

scale

display