图片根据容器大小自适应

经常会遇到这种需求，就是根据图片的最长边缘来等比自适应，通过纯css可以很简单的使图片不变形显示。

应用场景

例如有长大于宽的 也有宽大于长的当然也有长等于宽的，但是需求是不知道图片的长和宽哪个长，那么就需要在不管图片的长和宽哪个长哪个短，在容器中都能自适应保持等比放大或缩小如图：

长大于宽的图

宽大于长的图

长等于宽的图

实现代码

可以看不管图片是什么比例的宽度，都可以自适应不变形的显示，代码很简单，只需要css就可以实现,将图片的max-width和max-height设置成100%

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

很简单的两行css代码就实现了

转载于:https://www.cnblogs.com/slongs/p/10001222.html