html - 如何在悬停时缩放多个图像而不改变其宽度和高度？

Question

我正在创建包含多个图像的画廊，并且在悬停时我希望它能够缩放图像而不缩放框。我正在使用 bootstrap 4。

<div class="row">
 <div class="col-12"><img class="galleryimg" src="images/3GALLERY-1A.jpg" width="100%" height="" alt=""/></div>
 <div class="col-12 "><img class="galleryimg" src="images/3GALLERY-2A.jpg" width="100%" height="" alt=""/></div></row>

CSS---------------------------------------------- -------------------------------------------------- -------------------------------------------------- -----------------

img.galleryimg{
    width: 100%;
    transition: 0.4s ease;
    transform-origin: 50% 50%;}

img.galleryimg:hover{
    transform: scale(1.2);
    width: 100%;}

Answer 1

尝试更改此行:

transition: 0.4s ease;

至

transition: transform 0.4s ease;

这应该可以解决问题。

编辑:对于显示的缩放效果，请尝试如下:

.col-12 {
  /* Change example sizes */
  height:100px;
  width:100px;
  overflow:hidden;
}

img.galleryimg{
    width: 100%;
    transition: transform 0.4s ease;
    transform-origin: 50% 50%;}

img.galleryimg:hover{
    transform: scale(1.2);
    width: 100%;}

<!-- Example image used -->
<div class="row">
  <div class="col-12"><img class="galleryimg" src="https://www.gravatar.com/avatar/ecad24d406a8b8fd5753363a4f691d9a?s=32&d=identicon&r=PG&f=1" width="100" height="100" alt="" /></div>
  <div class="col-12 "><img class="galleryimg" src="https://www.gravatar.com/avatar/ecad24d406a8b8fd5753363a4f691d9a?s=32&d=identicon&r=PG&f=1" width="100" height="100" alt="" /></div>
</div>