將鼠標懸停在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);
}