经常会遇到这种需求，就是根据图片的最长边缘来等比自适应，通过纯css可以很简单的使图片不变形显示。
应用场景
例如有长大于宽的 也有宽大于长的当然也有长等于宽的，但是需求是不知道图片的长和宽哪个长，那么就需要在不管图片的长和宽哪个长哪个短，在容器中都能自适应保持等比放大或缩小如图：
长大于宽的图
宽大于长的图
长等于宽的图
实现代码
可以看不管图片是什么比例的宽度，都可以自适应不变形的显示，代码很简单，只需要css就可以实现,将图片的max-width和max-height设置成100%
img {
max-width: 100%;
max-height: 100%;
}
很简单的两行css代码就实现了