悬停时缩放图像

时间:2016-01-02 22:21:12

标签: html css

我正在尝试建立一个网站,所以当我悬停它时我有一个图像我希望它可以缩放,但问题是图像缩放有一个糟糕的方式它来自div如何我可以修复它? / p>

.container{
  height: 400px;
  width: 500px;
  border: 2px solid red;
}
.container:hover img{
  height: 500px;
  width: 600px;
}

我的CSS风格

.nav-btn:before {
        background-image: url('icons/mobile_menu_bttn.png');
        background-size: 16px 16px;
        width: 16px;
        height: 16px;
        content:"";
    }

FIDDLE

3 个答案:

答案 0 :(得分:2)

类似这样的事件JS Fiddle

.container {
  height: 400px;
  width: 500px;
  border: 2px solid red;
  overflow: hidden
}
.container img {        /* add this rule */
  width:100%;;
  height:100%;
  transition:all 0.7s ease-in-out;
}
.container:hover img {   /* change this rule */
  width:120%;
  height:120%;
  margin:-10% 0 0 -10%;
  transition:all 0.7s ease-in-out; 
}
<div class="container">
  <img src="http://motivationhacks.org/wp-content/uploads/2015/07/steve-jobs-black-white.jpg" alt="" height="400" width="500" />
</div>

答案 1 :(得分:2)

最有效的方法之一是使用scale转换CSS属性,如下所示,

.container{
  height: 400px;
  width: 500px;
  border: 2px solid red;
  overflow: hidden;
}

.container:hover img{
  transform: scale(1.25);
}

通过使用缩放属性,图像可以在包括移动设备在内的所有设备上平滑缩放。因此,您无需为每个设备指定准确的高度和宽度值。

希望这会有所帮助:)

答案 2 :(得分:1)

尝试将// Get all the dom nodes with the data-X var nodes = document.querySelectorAll('[data-prefix]'), values = []; for (var i = 0; i < nodes.length; i++) { values.push(nodes[i].dataset.prefix + nodes.textContent); } 添加到div中,以便剪切内容,其余内容将不可见

overflow: hidden