css3缩小图片显示 |css 图片颜色反色

img {
max-width: 100%;
height: auto;
transition: all 0.3s ease-in-out;
}
img:hover {
transform: scale(0.8);
}

使用上述代码，大家可以实现缩小图片的效果。首先，大家设置图片的最大宽度为100%，高度自适应，以保证图片不会超出容器范围。同时，大家添加了一个过渡动画，使得缩放过程更加平滑自然。

然后，大家通过:hover伪类来实现鼠标悬停时的缩放效果。使用transform属性，大家将图片缩小至原来的80%大小，从而达到缩小显示的效果。同时，过渡动画也会在这个过程中生效，使得效果更加出色。

CSS3的缩小图片显示功能非常实用，可以以更加优雅的方式展示图片。大家可以根据需要调整缩放比例、过渡效果等参数，以获得最佳的视觉效果。