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

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

将以下样式添加到包含#forumGroupdiv中,这样就不允许内部内容超出其边界.

#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样式放在样式表中(不是内联).:)