放大div内的图像而不移动div [英] Zoom on image inside div without div moving

问题描述

如何在没有悬停时实际 div 缩放的情况下制作此 div 缩放比例内的图像?所以我只想放大图像.

代码如下:

<img id="image" src="some-image">

解决方案

使用 transform: scale

#container {显示:内联块；边距:20px；边框:1px纯黑色；溢出:隐藏；/* 当孩子比父母大时剪掉多余的部分 */}#容器 img {显示:块；转换:转换 .4s；/* 更平滑的缩放 */}#container:hover img {变换:比例(1.3)；变换原点:50% 50%；}

<img id="image" src="http://placehold.it/150">

How can I make the image inside of this div scale without the actual div scaling on hover? So I only want the image to get zoomed on.

Here is the code:

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

解决方案

Use 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="http://placehold.it/150">
</div>

这篇关于放大div内的图像而不移动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！