css3保持图片比例缩放

CSS3提供了一种保持图片比例缩放的方法，使用这种方法可以在不失真的情况下缩放图片。下面我们先介绍一下CSS3的background-size属性。

 .background{
background-image: url('img/bg.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
} 

上面的代码中，我们使用了background-size属性，将图片的大小设为cover，这样可以自适应容器，并且保持图片的比例。

接下来，我们介绍一下CSS3的另一种方法：使用max-width和max-height属性。

 img{
max-width: 100%;
max-height: 100%;
} 

上面的代码中，我们设置了图片的最大宽度为100%，最大高度也为100%，这样可以保持图片的比例，并且在容器宽度和高度超过图片的宽度和高度时自适应缩放。

可以看出，使用CSS3保持图片比例缩放非常方便，可以给我们带来很多便利。

查看更多关于css3保持图片比例缩放的详细内容...