码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-05-09 10:23:07      阅读:325      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   color   

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

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

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

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

bubuko.com,布布扣
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>max-width的使用</title>
</head>
<body>
    <img src="http://images.china.cn/attachement/jpg/site1000/20130531/7427ea210a41131295c830.jpg" style="max-width:300px;" />
</body>
</html>
bubuko.com,布布扣

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

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

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

标签:style   blog   class   code   java   color   

原文地址:http://www.cnblogs.com/kakag/p/3716789.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!