Question

我正在尝试建立一个网站，所以当我悬停它时我有一个图像我希望它可以缩放，但问题是图像缩放有一个糟糕的方式它来自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

Answer 1

类似这样的事件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>

Answer 2

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

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

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

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

希望这会有所帮助：）

Answer 3

尝试将// 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

悬停时缩放图像

3 个答案: