将鼠标悬停在CSS中缩放图像

Question

我不明白我的代码正在发生什么。 一切正常，但是主要问题是下一张图像移至下一行。 我不想将图像移到下一行。 有什么解决办法可以使图像保留在该行中。 我不想使用任何<table>标签。 请帮忙...！

这是我的代码：

 img { max-width: 100%; display: inline-block; } .imz { top: 50%; left: 100%; width: 150px; height: 150px; -webkit-transform: translate(-50%,-50%); /* Safari and Chrome */ -moz-transform: translate(-50%,-50%); /* Firefox */ -ms-transform: translate(-50%,-50%); /* IE 9 */ -o-transform: translate(-50%,-50%); /* Opera */ transform: translate(-50%,-50%); } .emz { width: 100%; height: 100%; } .emz img { -webkit-transition: all 0.5s ease; /* Safari and Chrome */ -moz-transition: all 0.5s ease; /* Firefox */ -o-transition: all 0.5s ease; /* IE 9 */ -ms-transition: all 0.5s ease; /* Opera */ transition: all 0.5s ease; } .emz:hover img { -webkit-transform:scale(1.05); /* Safari and Chrome */ -moz-transform:scale(1.05); /* Firefox */ -ms-transform:scale(1.05); /* IE 9 */ -o-transform:scale(1.05); /* Opera */ transform:scale(1.05); } 

 <div class="imz"> <div class="emz"> <img src="https://www.w3schools.com/css/img_fjords.jpg" height="150px"> </div> </div> 

Answer 1

这是更新的答案，您只需要添加overflow:hidden并删除一些额外的样式

的HTML

<div class="imz">
   <div class="emz">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" height="150px">
   </div>
</div>

的CSS

img {
 max-width: 100%;
 display: inline-block;
}
.imz {
  top: 50%;
  left: 100%;
  width: 150px;
  height: 150px;
}
.emz {
  width: 100%;
  height: 100%;
  overflow:hidden;
}
.emz img {
  -webkit-transition: all 0.5s ease; /* Safari and Chrome */
  -moz-transition: all 0.5s ease;    /* Firefox */
  -o-transition: all 0.5s ease;      /* IE 9 */
  -ms-transition: all 0.5s ease;     /* Opera */
  transition: all 0.5s ease;
}
.emz:hover img {
 -webkit-transform:scale(1.05); /* Safari and Chrome */
 -moz-transform:scale(1.05);    /* Firefox */
 -ms-transform:scale(1.05);     /* IE 9 */
 -o-transform:scale(1.05);      /* Opera */
 transform:scale(1.05);
}