web图片居中 缩放时候以图片中心放大缩小代码实现

你可以使用CSS来实现Web图片的居中和缩放。下面是一个示例代码：

HTML：

<div class="image-container">
  <img src="your-image-url" alt="your-image-description">
</div>

CSS：

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px; /* 设置容器高度 */
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

解释：

1. `.image-container` 元素设置为 `display: flex`，让其内部的元素（图片）水平和垂直居中。
2. `height` 属性设置容器高度，可以根据实际情况来调整。
3. `img` 元素设置 `max-width: 100%; max-height: 100%`，让其不会超出容器范围。
4. `object-fit: contain` 让图片在缩放时保持比例，并以图片中心为基准进行缩放。

这样，你就可以实现Web图片的居中和缩放了。