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

问题
我正在尝试使用 CSS3/HTML 创建缩放效果，但由于某种原因，我无法将图像保持在父 div 的范围内。

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

这是当前的 HTML

1. <div id=&quot;forumGroup&quot; style=&quot;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;&quot;>
   
2. <div class=&quot;mainGroupImage&quot;>
   
3. <img src=&quot;http://placehold.it/250x250&quot; style=&quot;width: 250px; height: 250px;&quot; />
   
4. </div>
   
5. </div>

复制代码

CSS：

1. .mainGroupImage{
   
2. max-width: 100%;
   
3. -webkit-transition: all 1s ease; /* Safari and Chrome */
   
4. -moz-transition: all 1s ease; /* Firefox */
   
5. -ms-transition: all 1s ease; /* IE 9 */
   
6. -o-transition: all 1s ease; /* Opera */
   
7. transition: all 1s ease;
   
8. }
   
9. 
   
10. .mainGroupImage:hover{
    
11. -webkit-transform:scale(1.25); /* Safari and Chrome */
    
12. -moz-transform:scale(1.25); /* Firefox */
    
13. -ms-transform:scale(1.25); /* IE 9 */
    
14. -o-transform:scale(1.25); /* Opera */
    
15. transform:scale(1.25);
    
16. }

复制代码

回答
将以下样式添加到包含 #forumGroup 的 div 中，以便内部内容不允许超出其范围。

1. #forumGroup{
   
2.   overflow:hidden
   
3. }
   
4. 
   
5. .mainGroupImage{
   
6.   max-width: 100%;
   
7.   -webkit-transition: all 1s ease; /* Safari and Chrome */
   
8.   -moz-transition: all 1s ease; /* Firefox */
   
9.   -ms-transition: all 1s ease; /* IE 9 */
   
10.   -o-transition: all 1s ease; /* Opera */
    
11.   transition: all 1s ease;
    
12. }
    
13. 
    
14. .mainGroupImage:hover{
    
15.   -webkit-transform:scale(1.25); /* Safari and Chrome */
    
16.   -moz-transform:scale(1.25); /* Firefox */
    
17.   -ms-transform:scale(1.25); /* IE 9 */
    
18.   -o-transform:scale(1.25); /* Opera */
    
19.    transform:scale(1.25);
    
20. }

复制代码

1. <div id=&quot;forumGroup&quot; style=&quot;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;&quot;>
   
2.   <div class=&quot;mainGroupImage&quot;>
   
3.     <img src=&quot;http://placehold.it/250x250&quot; style=&quot;width: 250px; height: 250px;&quot; />
   
4.   </div>
   
5. </div>

复制代码

这仍然允许缩放因子，但它将保持在拐角半径内。

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