[分享]css3图片自动中心缩放

CSS3的出现，给网页设计带来了更多的可能性。其中，图片自动中心缩放是其中一个十分有用的功能，下面将为大家介绍这一功能的实现方法。首先，在CSS中创建一个类，命名为“imgbox”（示例代码如下）：....

CSS3的出现，给网页设计带来了更多的可能性。其中，图片自动中心缩放是其中一个十分有用的功能，下面将为大家介绍这一功能的实现方法。

首先，在CSS中创建一个类，命名为“img-box”（示例代码如下）：

.img-box {
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* 作为一个容器，宽高比为1:1，padding-bottom的值为宽度的百分之百，这样就能实现自动缩放。 */
    position: relative;
    overflow: hidden; /* 保证图片不会溢出容器 */
} 

然后，我们可以在这个容器中添加一个图片，这里假设图片的文件名为"example.jpg"：

<div class="img-box">
    <img src="example.jpg" alt="example">
</div> 

这样，我们的图片就被包裹在宽高比为1:1的容器中了。接下来，我们可以通过absolute定位、top、left、transform属性来实现图片的垂直水平居中。

.img-box img {
    position: absolute; /* 绝对定位 */
    top: 50%; /* 位于容器的中央 */
    left: 50%;
    transform: translate(-50%, -50%); /* 使用translate()将其水平方向和垂直方向各自向左上方移动50% */
} 

这样，我们就完成了图片自动中心缩放的功能。值得一提的是，当窗口大小改变时，图片会自动根据容器大小进行缩放，保证始终保持居中的状态。