css实现图片缩放但大小不变

CSS实现图片缩放但大小不变是一种比较常见的需求，例如在网页设计中，在图片缩放后需要保持图片的大小不变，可以使用CSS来实现。下面我们一步步来实现这个效果。

css实现图片缩放但大小不变

步骤一：首先需要定义一个固定大小的div，这个div即为图片的容器。我们可以设置这个容器的宽高以及边框样式。如下：

    .img-container {
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
    }

步骤二：在这个容器中，我们需要插入一张图片，并且需要定位这个图片。我们可以使用绝对定位来实现。如下：

    .img-container img{
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
    }

这里需要注意的是图片的宽高必须为100%。而且为了保证图片的位置与容器内的位置一致，需要将图片的位置设置为绝对定位，并且左上角坐标为（0,0）。

步骤三：接下来就是实现图片的缩放效果了。我们可以使用transform属性来实现。transform包含了许多子属性，其中的scale属性可以用来缩放图片。scale的默认值为1，表示不缩放。我们可以设置scale的值为0.8，表示缩小20%。如下：

   .img-container:hover img{
        transform:scale(0.8);
        transform-origin:center center;
    }

在这里，我们需要在.img-container的伪类:hover中设置图片的缩放效果，当鼠标悬浮在容器上时，图片会被缩小20%。同时需要给transform-origin属性设置为center center，表示以图片的中心点作为缩放的基准。

最终，我们就可以实现图片缩放但大小不变的效果了。当然，你也可以调整缩放比例、容器大小和边框样式来实现不同的效果，以满足不同需求。