基于CSS的前端图片自适应等比缩放

前端处理过图片的同学,当图片出现像素大小不一,高宽不确定的时候,很多时候,需要根据容易大小完成图片的自适应等比缩放效果,不然会出现图片变形或者图片被裁剪的不友好渲染.

解决方法:

1.治标.要想治标的话,就需要在上传照片的时候对图片限制或者等比提前处理,这样后续前端取出来的话,就可以非常开心的渲染了,因为图片提前已经根据我们的需要后端处理好了.

但是,上述情况,很多时候不适用,更多时候,需要我们后续前端拿图片的时候,实现图片的自适应,(因为用户很多时候的图片很难达到要求)

2.终极解决方法:前端CSS实现图片的等比自适应缩放

该方式是通过CSS设置img标签的样式属性,img会根据父容器的自动缩放，并保持图片原来的比例,这样我们在实现图片适应的时候只需要设置父容器的大小就可以。

(下面为img标签样式设置,经测试,可以实现效果)

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