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

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

这里是小提琴链接：

示例代码：

.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%;
}

---

您可以使用css转换：

---

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

再加上雨果的答案，你应该将其添加到父元素中

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

我希望效果将在div内显示，而不是缩放整个div。它不会缩放整个div。如果将轮廓应用于两个元素，您可以看到这一点。还是我误解了你？嗯，我希望“包裹”缩放效果的div保持原来的大小，并且缩放效果只在内部显示div@alonblack请停止假设，直到你检查雨果的答案。我赞同/+1他的解决方案（因为这是它应该发挥作用的方式）。缩放子对象与父对象的维度无关。除非父对象未设置大小。如果解决方案不起作用，请将父项“最大宽度/最大高度”设置为不超出预期区域

.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);    
}