html - 在不移动 div 的情况下放大 div 内的图像

Question

如何在悬停时不实际缩放 div 的情况下在此 div 缩放内制作图像？所以我只想放大图像。

代码如下:

<div id="container">
    <img id="image" src="some-image">
</div>

Answer 1

使用transform: scale

#container {
  display: inline-block;
  margin: 20px;
  border: 1px solid black;
  overflow: hidden;            /* clip the excess when child gets bigger than parent */
}
#container img {
  display: block;
  transition: transform .4s;   /* smoother zoom */
}
#container:hover img {
  transform: scale(1.3);
  transform-origin: 50% 50%;
}

<div id="container">
    <img id="image" src="https://via.placeholder.com/150">
</div>