css单张图片放大缩小

在网页中，经常会使用到图片，有时需要对图片进行放大缩小操作来达到更好的展示效果。下面我们就来介绍一下如何使用CSS来对单张图片进行放大缩小。

img {
  width: 100%; /* 图片宽度的百分比，表示占用父元素的宽度 */
  height: auto; /* 图片高度会随着宽度的变化而自动计算，保持图片比例不变 */
}

img:hover {
  transform: scale(1.2); /* 鼠标悬停时，图片放大缩小的比例为1.2倍 */
  transition: all 0.3s ease-out; /* 图片变化时，需要过渡效果 */
}

在上面的代码中，使用了CSS中的transform属性来实现图片的缩放功能。当鼠标悬停在图片上时，图片的大小会以一定的比例进行放大缩小，以达到更好的展示效果。其中，transition属性可以设置图片变化时的过渡效果，让图片变化更加平滑自然。

通过上述代码实现的效果可以应用于图片展示网站、餐饮店铺等多种场合，为用户提供更好的展示效果，提升网站或商家的品牌形象。