如何在百分比上缩放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

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