Question

我尝试使用css3 / html创建缩放效果，但出于某种原因，我无法让图像保留在父div的边框内。

我已经尝试将图像嵌套在另一个div中，并且只是将其保留为父div中的图像。它并不想为我工作。

这是当前的HTML

<div id="forumGroup" style="border: 1px solid #000000; box-shadow: 3px 3px  5px #999; border-radius: 10px; margin: 5px; display: block; width: 250px; height: 250px; padding: 10px; float: left; position: relative; text-align:  center; display: block;">
<div class="mainGroupImage">
<img src="http://placehold.it/250x250" style="width: 250px; height: 250px;" />
</div>
</div>

CSS：

.mainGroupImage{
max-width: 100%;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}

.mainGroupImage:hover{
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
 transform:scale(1.25);
}

小提琴：http://jsfiddle.net/ojc5aaaf/

Answer 1

将以下样式添加到包含#forumGroup div的内容中，这样就不允许内部内容超出其边界。

#forumGroup{
  overflow:hidden
}

.mainGroupImage{
  max-width: 100%;
  -webkit-transition: all 1s ease; /* Safari and Chrome */
  -moz-transition: all 1s ease; /* Firefox */
  -ms-transition: all 1s ease; /* IE 9 */
  -o-transition: all 1s ease; /* Opera */
  transition: all 1s ease;
}

.mainGroupImage:hover{
  -webkit-transform:scale(1.25); /* Safari and Chrome */
  -moz-transform:scale(1.25); /* Firefox */
  -ms-transform:scale(1.25); /* IE 9 */
  -o-transform:scale(1.25); /* Opera */
   transform:scale(1.25);
}

<div id="forumGroup" style="border: 1px solid #000000; box-shadow: 3px 3px 5px #999; border-radius: 10px; margin: 5px; display: block; width: 250px; height: 250px; padding: 10px; float: left; 							 								position: relative; text-align: center; display: block;">
  <div class="mainGroupImage">
    <img src="http://placehold.it/250x250" style="width: 250px; height: 250px;" />
  </div>
</div>

这仍然允许缩放系数，但它将保持在圆角半径“内”。

另外，我知道这可能只是测试代码，但是继续将#forumGroup样式放在样式表中（不是内联）。：）

Answer 2

我在最近的一个项目中遇到了这个问题，并且有一个简单的解决方案。

我将

overflow: hidden;

添加到了父div，它解决了问题。

在悬停时缩放图像而不超过父div边框

2 个答案: