IT干货网

图片根据容器大小自适应

xmjava 2022年03月15日 编程设计 149 0

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

应用场景

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

长大于宽的图


宽大于长的图


长等于宽的图

实现代码

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

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

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


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

react显示pdf文件 一次性显示所有页