在手边的项目遇到了一点问题，需要从后台拿取图片外链再展示在前台的详情页里。但是外层容器的大小是固定的。而从外联的图片传回来的确实大小不一横竖不定的图片。 参考了网上现成的解决方案做了修改后算是解决了这个问题。 解决代码如下：因为这段代码的测试图片是一只小猫，故给这段代码的类名定为 ...

按父容器宽度自动缩放，并且保持图片原本的长宽比 img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } 　　 ...

在img标签里面只设置宽，不设置高，图片就会等比例缩放。 ...

在img标签里面只设置宽，不设置高，图片就会等比例缩放。 ...

在img标签里面只设置宽，不设置高，图片就会等比例缩放。 ...

在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 100%;和height: 100%; 如果图片刚好和你设定的div等比例,那自然是没有问题 ...

...

在img标签里面只设置宽，不设置高，图片就会等比例缩放。 #logo { height:100%; } <div class="branding"> <img src="/static/image ...