1.<img>导入
2.background-image.
就只有这2种方法，即使是用JS或者其他语言来控制，也是万变不离其宗，这两种方法就是本质。
对于第一种(<img>)，控制大小可以通过外框设置宽度，然后img用100%来适应外框（这样子，图片会根据width来自动调整图片，如果长、宽都设死了，那么图片一般都会出现变形），当然纵向也是同理可以执行的。
第二种的话(background-image)可以通过：
background-size来自适应大小。样式有4个属性：
length：
设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
测试
percentage：
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
测试
cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
测试
contain：
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
使用div+css布局方式比较适宜，table布局的缺点：如果用table布局需要注意不能用一个table布局所有图片，因为浏览器加载table的时候会等一个table里面的所有数据加载完毕以后才显示，这样明显不好，而分成多个table布局以后这个加载问题是解决了，但是代码可以想象必定很多冗余，比较好的方式是使用div+css方式浮动，这样的图片缩略图布局通常用dl+css的方式，dl下dt放标题，dd放图片，然后浮动整个dl，如：.box{float:leftdisplay:blockwidth:..height:..'}... 图片标题 图片标题 ... 补充：在div+css布局下，长宽差距很大的问题解决办法通常有以下方法：1，固定图片的长宽，在设置img标签的长宽为同一的值，当图片尺寸均类似的时候可采用该方法。2，图片编辑，有很多图片展示类的网站会采用该方法，预先编辑图片的缩略图，这样可以保证图片为相同的大小。3，使用服务器端语言动态生成缩略图，如果图片数据为可变数据可通过该方法，生成缩略图的方法为每上传一张图片即生成一张缩略图并存储，下次显示的时候直接调用该地址显示缩略图即可，绝大多数图片类共享网站与社区网站均采用该方式，如picasa，flickr，facebook等，4，js脚本控制，如果你的数据并非频繁修改的数据则推荐使用该方法，方法为：确定一个理想的图片尺寸，如100px x 100px，然后运行脚本计算每张图片的尺寸，如果宽度大于100px则将宽度设为100px，高度自适应，高度同理，如果均大于则计算大于百分比然后调整为100px x 100px相框内显示高度。 复制一下代码，存储为html文件预览：无标题文档 *{ padding:0 margin:0 } #outer{ margin:50px padding:20px border:solid 1px #CCC } img{ padding:2px border:solid 1px #CCC } #outer dl.box{ display:block float:left width:156px height:200px margin:5px border:solid 2px #FFF overflow:hidden } #outer dl dd{ text-align:center } #outer dl dt{ text-align:center font-size:12px padding:3px 0 } #inner{ display:inline-block } #inner:after{ content:'.' display:block height:0 overflow:hidden visibility:hidden clear:both } #intro{ background:#999 padding:3px font-size:12px margin:10px 0 0 0 } function $(ele){ return document.getElementById(ele) } function change(){ var img = document.getElementsByTagName('img') for(var i = 0i if(img[i].width >= 150 &&img[i].height img[i].width = 100 }else if(img[i].width = 150){img[i].height = 100 } else{if(img[i].width/150 >= img[i].height/150){ img[i].width = 150}else{ img[i].height = 150} } } } var prev = null function type(){var img = document.getElementsByTagName('img') for(var i = 0i ( function(i){ img[i].onmouseover = function(){ img[i].parentNode.parentNode.style.border = 'solid 2px blue' prev = img[i].parentNode.parentNode } img[i].onmouseout = function(){ prev.style.border = 'solid 2px #fff' } } )(i) } } window.onload = function(){change() type()setTimeout(function(){$('inner').style.display = 'block'$('info').style.display = 'none'},1000) }正在装载数据，请稍后... 图片标题 图片标题" target="_blank" >
" /> 图片标题
" target="_blank" >
" /> 图片标题
" target="_blank" >
" /> 图片标题 图片标题 图片标题
" target="_blank" >
" /> 图片标题
" target="_blank" >
" /> 图片标题
" target="_blank" >
" /> 图片标题 提示:复制链接查看图片源尺寸,调节浏览器查看布局样式
