css 如何点击一张图片放大

CSS如何点击一张图片放大？这个问题相信许多人都会遇到，下面我们就来聊一聊。

code>
    HTML代码如下：div class="image-container">
      img src="example.jpg">
    /div>
CSS代码如下：.image-container img {
      max-width: 100%;
      height: auto;
      transition: 0.3s;
}
.image-container img:hover {
      transform: scale(1.2);
      cursor: zoom-in;
      z-index: 1;
}
    /code>
    

以上就是放大一张图片的CSS代码了。我们先在HTML中用div包含图片，然后在CSS中给图片设置一些基本的样式，比如最大宽度为100%、高度自适应等。接着，我们给图片hover时添加了一些效果，比如放大到原来的1.2倍、鼠标悬浮时变为放大镜样式等。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！