图片上传显示效果

在网页中显示多张图片，并且 width 用百分比布局，高度随内容扩展，每张图片的长宽不一，如何达到一个比较好的显示效果呢？

我是打算每张图片以正方形排列，问题是每张图片的长宽不一，若固定大小显示就会拉扯。

解决方法：用<ul><li>，固定<li>的大小，显示<li>大小的图片，多于部分隐藏。

1.用百分比布局是为了可以在一个容器方便地显示要求数量的图片，若使用固定的像素值，则父辈容器长宽改变子容器也得改变。但是用百分比布局无法知道容器的真实width值。所以，固定<li>大小为正方形的方法：

$(".pic-ul li").height($(".pic-ul li").width() ); 

2.图片可能过大或过小，使显示一小部分或出现留白。解决方法：使图片窄的一边充满容器。

 if (img.height  < img.width ) {
	 img.style.height="100%";
 }else{
	 img.style.width="100%";
 }

图片上传并回显：

HTML：

 <div class="center-c">      
        <div class="writer-center">          
           <div id="result"><ul class="pic-ul"></ul><div style="clear:both"></div></div><!--显示图片-->        
        </div>
       <p>
        <a href="javascript:void(0)" class="pic" title="图片"> 　　          
         <input type="file"  id="file"  class="pic-file" name="file" accept=".jpg,.gif,.png">
        <img src="tp2.png" width="25"/></a>  
       </p>
     </div>

css：

*{	border:0;	outline:0;	font-family:Arial, Helvetica, Sans-Serif;	vertical-align:baseline;list-style:none;	text-decoration:none;margin:0;	padding:0;}
html{font-size:62.5%;overflow-x:hidden;}
body{	font-size:14px;	font-size:1.4rem;	background:url(../img/bj4.jpg);}
a,a:hover,a:visited,a:active,a:link{text-decoration:none; 	color:#666;}
.center-c {width:80%;margin-left:10%; margin-top:50px}
.writer-center{	width:100%;	min-height:110px;box-shadow:0 0 10px 0 #CCC inset;background-color:#fff;	border:#CCC thin solid;}
/*上传图片显示*/
.pic{ position:relative; cursor:pointer;}
.pic-file{position:absolute; opacity:0; width:100%; height:auto; top:0; right:0;}
#result{width:96%; margin:10px 2%; }
#result li{float:left; width:33%; height:170px; overflow:hidden; margin-left:0.1%; border:#F1F1F1 thin solid;}

JavaScript：

$(document).ready(function(){
  //图片上传
 function ProcessFile(e) {
    var file = document.getElementById('file').files[0];
    if (file) {
                var reader = new FileReader();
                reader.onload = function (event) {
                    var txt = event.target.result; 
                    var img = document.createElement("img");
                    img.src = txt;
                   
					//调整图片大小
					img.onload = function(){
                         if (img.height  < img.width ) {
							 img.style.height="100%";
					 	 }else{
							img.style.width="100%";
					 	 }
					}
				
    				var pli=$("<li></li>").html(img );					
					$(".pic-ul").append(pli); 
					$(".pic-ul li").height($(".pic-ul li").width() ); /*使图片正方形获取div的宽度，设置div正方形*/ 
					
                };
      }
      reader.readAsDataURL(file);
   } 
		
  function contentLoaded() {
        document.getElementById('file').addEventListener('change',ProcessFile, false);
  }
 
  window.addEventListener("DOMContentLoaded", contentLoaded, false);
  /*end of 上传图片*/
});

最终效果：