html - 如何在悬停时以百分比缩放div

Question

我希望放大只会影响 div 内的 img 并且不会调整所有 div 比例

这是小提琴链接：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%;
}

Answer 1

您可以使用 css 转换：

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 倍。

Answer 2

添加到雨果的答案，您应该将其添加到您的父元素中。

.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 就不会与子图像一起调整大小。