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