在项目开发中需要先上传图片到文件服务器，然后在页面上进行展现，表示上传成功。
起初没有对图片做任何控制，只是增加一个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
时间： 2024-10-10 05:21:24