如何在鼠标悬停时以百分比缩放div

Question

我希望缩放只应用于div内的img，而不会调整整个div的比例。

这是fiddle链接: http://jsfiddle.net/4tHWg/1/ 示例代码:

.box {
   float: left;
   position: relative;
   width: 14.285714286%;



}

.boxInner img {
   width: 100%;
   display: block;
   -webkit-filter: grayscale(00%);
   -moz-filter: grayscale(00%);
   -o-filter: grayscale(00%);
   -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
      transition: all 1s ease;

}

.boxInner img:hover {
  width: 200%;
}

- alonblack

Answer 1

你可以使用CSS transform属性： http://jsfiddle.net/4tHWg/3/

.boxInner img:hover {      
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  -o-transform: scale(1.4);
  transform: scale(1.4);    
}

1.4等于它原始大小的1.4倍。

- hugo der hungrige

---

我希望效果只在一个 div 内发生，而不是缩放整个 div。 - alonblack

它无法扩展。请查看fiddle。 - hugo der hungrige

@alonblack 在查看 Hugo 的答案之前，请不要做出任何假设。我支持并点赞他的解决方案（因为这是应该的方式）。缩放子元素与父元素的尺寸无关。 - Terry

除非父元素没有设置大小。如果解决方案无效，请将父元素的最大宽度/最大高度设置为不超出预期区域。 - André Lucas

它只能在现代浏览器中工作，但CSS变换也只能在那里实现。Chrome是我的快速答案。如果仅使用CSS无法实现所需效果，我建议尝试使用JavaScript进行类似的解决方案。 :) - André Lucas

Answer 2

在hugo的回答基础上，您应该将此添加到父元素中。

.boxInner {
    overflow: hidden;
}

.boxInner img:hover {      
   -webkit-transform: scale(1.4);
   -moz-transform: scale(1.4);
   -ms-transform: scale(1.4);
   -o-transform: scale(1.4);
   transform: scale(1.4);    
}

这样子，div就不会随着子图像的大小而调整大小。

- JayC Ker