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

鼠标悬停在css上的缩放图像

1 个答案: