问题
我正在尝试使用 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);
- }
回答
将以下样式添加到包含 #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 样式也放入样式表中（不是内联）。 :)
|
收藏
