悬停时缩放图像但不超过父 div 边框
问题我正在尝试使用 CSS3/HTML 创建缩放效果，但由于某种原因，我无法将图像保持在父 div 的范围内。
我已经尝试将图像嵌套在另一个 div 中，也只是将其作为父 div 中的图像。它不想为我工作。
这是当前的 HTML
<div id="forumGroup" style="border: 1px solid #000000; box-shadow: 3px 3px5px #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);
}
回答
将以下样式添加到包含 #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 样式也放入样式表中（不是内联）。 :)
页:
[1]