在没有div移动的情况下放大div内的图像

时间:2016-10-29 12:45:45

标签: html css css3 css-transitions css-transforms

如何在没有悬停时实际div缩放的情况下在div范围内制作图像?所以我只想让图像放大。

以下是代码:

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

2 个答案:

答案 0 :(得分:5)

使用transform: scale

&#13;
&#13;
#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%;
}
&#13;
<div id="container">
    <img id="image" src="http://placehold.it/150">
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

具有过渡效果的优雅解决方案

#container {
  display: inline-block;
  overflow: hidden;
}

#container img {
  display: block;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#container:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
<div id="container">
    <img id="image" src="http://placehold.it/200">
</div>