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

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

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

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

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

<!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>

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

posted @ 2014-05-08 18:33  飞翔的花狸猫  阅读(704)  评论(0编辑  收藏  举报