找回密码
 立即注册
transitiontransformscale1.25 | 软件设计/软件工程 2022-05-03 217 0star收藏 版权: . 保留作者信息 . 禁止商业使用 . 禁止修改作品
问题
我正在尝试使用 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. .mainGroupImage:hover{
  10. -webkit-transform:scale(1.25); /* Safari and Chrome */
  11. -moz-transform:scale(1.25); /* Firefox */
  12. -ms-transform:scale(1.25); /* IE 9 */
  13. -o-transform:scale(1.25); /* Opera */
  14. transform:scale(1.25);
  15. }
复制代码

回答
将以下样式添加到包含 #forumGroup 的 div 中,以便内部内容不允许超出其范围。
  1. #forumGroup{
  2.   overflow:hidden
  3. }

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

  12. .mainGroupImage:hover{
  13.   -webkit-transform:scale(1.25); /* Safari and Chrome */
  14.   -moz-transform:scale(1.25); /* Firefox */
  15.   -ms-transform:scale(1.25); /* IE 9 */
  16.   -o-transform:scale(1.25); /* Opera */
  17.    transform:scale(1.25);
  18. }
复制代码
  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 样式也放入样式表中(不是内联)。 :)





上一篇:如何使用python计算地球表面多边形的面积?
下一篇:是否以编程方式访问 Android Q (SDK=29) 上的下载文件夹?