[分享]css3宽高等比变化

CSS3的宽高等比变化是一项非常重要的功能，可以让我们轻松地实现图片的自适应大小，而不需要依赖JavaScript或其他框架。这种技术利用CSS3的百分比单位和计算方法来实现图片的等比缩放。/ 以高度...

CSS3的宽高等比变化是一项非常重要的功能，可以让我们轻松地实现图片的自适应大小，而不需要依赖JavaScript或其他框架。这种技术利用CSS3的百分比单位和计算方法来实现图片的等比缩放。

/* 以高度为准的等比缩放 */
img{
  height: 100%;
  width: auto;
} 

上述代码中，我们将图片的高度设置为100%，同时将宽度设为自动，这样就可以使图片等比例缩放。实际上，这种方法与直接设置为百分比宽度是一样的

/* 以宽度为准的等比缩放 */
img{
  width: 100%;
  height: auto;
} 

如果我们想将图片的宽度作为基础进行等比缩放，那么可以使用一个相似的方法，将高度设为100%，同时将宽度设置为自动。

此外，我们还可以使用CSS3的视口单位来实现更加灵活的等比缩放。例如：

img{
  max-height: 100vh;
  max-width: 100vw;
} 

在上述代码中，我们使用了视口单位vh和vw，分别表示视口高度和宽度的百分比。这样就可以让图片在视口中自适应缩放，非常适合移动设备。

总体来说，CSS3的宽高等比变化是一个非常实用的功能，可以帮助我们实现图片的自适应大小，并且在移动设备中具有更好的适用性。