css3鼠标经过图片放大不超出框

CSS3鼠标经过图片放大不超出框是一种非常常用的页面效果，可以让网站页面的展示更加吸引人。 那么具体该如何实现呢？我们可以使用CSS3中的transform属性实现图片的放大效果。

/* 传统CSS实现图片放大 */
.container {
  overflow: hidden;
}
.container img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-in-out;
}
.container:hover img {
  transform: scale(1.2);
}

/* CSS3实现图片放大不超出框 */
.container2 {
  overflow: hidden;
  position: relative;
}
.container2 img {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.3s ease-in;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.container2:hover img {
  transform: scale(1.2) translate(-50%,-50%);
} 

如代码所示，我们首先需要将图片放在一个容器中（如.container），设置overflow: hidden来确保图片不会超出容器范围。然后设置图片的宽度为100%以确保图片可以适应其父容器。将鼠标经过事件添加到图片上，使用transform:scale属性实现图片的放大效果。 但是这种方法存在一个问题，当图片放大后，可能会超出容器的范围。这时候我们需要使用一些技巧， 使用相对定位设置图片的top和left属性为50%，然后使用translate属性将图片向上和向左移动50%以实现图片居中的效果。对于图片放大后超出容器的问题，我们使用max-width:100%和max-height:100%来限制图片放大后的最大宽度和最大高度。 当鼠标移到图片上时，不仅需要将图片放大，还需要将图片居中。我们在.scale:hover的代码块中加入translate(-50%,-50%)即可。这样我们就实现了CSS3鼠标经过图片放大不超出框的效果。