当前位置:Gxl网 > 互联网 > 上传预览,图片展示大小的控制

上传预览,图片展示大小的控制

时间:2021-07-01 10:21:17 帮助过:4人阅读

在项目开发中需要先上传图片到文件服务器,然后在页面上进行展现,表示上传成功。

起初没有对图片做任何控制,只是增加一个img标签,将src设置为空,当图片上传成功后,通过JavaScript动态的将src设置为服务器上的文件地址。当使用小点图片进行上传时,显示没有任何问题,但是上传大的图片的时候,图片就会破坏div的布局。

为了控制图片的显示,起初就给img标签设置了固定的高度和宽度:height="300" width=‘200‘。这时候图片虽然不会破坏页面的整体布局,但是显示效果会非常的不好,尤其是遇到那种图片长宽比例差别很大的,显示会非常的畸形。请教了小伙伴以后,将img的样式中height的值给删除,只保留width属性,图片的高就会等比例的去显示。虽然效果不错,但是对于小的图片,展示上会将图片拉伸,看起来仍然不是很好。

最后终于找到了合适的标签来控制图片的显示,那就是max-width最大宽度与min-width最小宽度。最小宽度(min-width)与最大宽度(max-width)用于设置图片最小最大宽度限制比较多,图片大小不定时候,让图片能有一个较统一的展示。下面是一个max-width的展示例子:

gxlsystem.com,布布扣

参考地址:http://www.divcss5.com/rumen/r423.shtml

上传预览,图片展示大小的控制,布布扣,bubuko.com