如何实现多张图片的固定比例缩放显示
我要做的是一个相关图片的展示。这些图片的宽是一样的（生成了固定宽度的略缩图 220）。高度不一样。我现在的做法是这样的。
设定了固定的高度。宽度是会根据栅栏系统变化的。这样排列是整齐的。
但是在某些分辨率下。宽度变的比较小。高度却不变。
图片就变形了。有什么办法解决么？
要求就是高度要都一样。能通过栅栏系统自适应。图片不变形。
<div class="well">
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-2">
<a href="http://127.0.0.1/xiximage/view/61" class="thumbnail">
<img src="http://127.0.0.1/xiximage/upload/2014/11/06/8be2cf5264623cb67d7505ea90031058_thumb.jpg" alt="韩国清纯模特街拍" style="height: 220px;">
</a>
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<a href="http://127.0.0.1/xiximage/view/43" class="thumbnail">
<img src="http://127.0.0.1/xiximage/upload/2014/11/06/153a22d85d7dd82f8804323debc94751_thumb.jpg" alt="韩国清纯模特街拍" style="height: 220px;">
</a>
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<a href="http://127.0.0.1/xiximage/view/27" class="thumbnail">
<img src="http://127.0.0.1/xiximage/upload/2014/11/06/f1745ccde1e87b9521889a81ab1f946b_thumb.jpg" alt="韩国清纯模特街拍" style="height: 220px;">
</a>
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<a href="http://127.0.0.1/xiximage/view/42" class="thumbnail">
<img src="http://127.0.0.1/xiximage/upload/2014/11/06/68c63fb41a123bf2a37aace07cd157ba_thumb.jpg" alt="韩国清纯模特街拍" style="height: 220px;">
</a>
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<a href="http://127.0.0.1/xiximage/view/44" class="thumbnail">
<img src="http://127.0.0.1/xiximage/upload/2014/11/06/93f0bfac47fa22128ea6b1aab04281bd_thumb.jpg" alt="韩国清纯模特街拍" style="height: 220px;">
</a>
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<a href="http://127.0.0.1/xiximage/view/11" class="thumbnail">
<img src="http://127.0.0.1/xiximage/upload/2014/11/06/98c955858aca3a4250960f44e018d4e6_thumb.jpg" alt="韩国清纯模特街拍" style="height: 220px;">
</a>
</div>
</div>
</div>
设定了固定的高度。宽度是会根据栅栏系统变化的。这样排列是整齐的。
但是在某些分辨率下。宽度变的比较小。高度却不变。
图片就变形了。有什么办法解决么？
要求就是高度要都一样。能通过栅栏系统自适应。图片不变形。
刚开始用，也遇到这个问题了。我是用js解决的，bootstrap图片自适应是让每张图片宽度等于窗口宽度然后除以列数减去一些padding,margin，你直接取出 img 的width();然后乘你的图片比例就可以，比如你的图片比例是3:2,就除3乘2就可以，加到窗口resize事件上，就实现响应了
//窗口resize的时候
$(window).resize(function(){
$("#xmore img").each(function(){
$("#xmore img").css("height",$(this).width()/3*2);
});
});
//正常加载后
$("#xmore img").each(function(){
$("#xmore img").css("height",$(this).width()/3*2);
});
//窗口resize的时候
$(window).resize(function(){
$("#xmore img").each(function(){
$("#xmore img").css("height",$(this).width()/3*2);
});
});
//正常加载后
$("#xmore img").each(function(){
$("#xmore img").css("height",$(this).width()/3*2);
});
你描述的是定宽，但却写的是height:220px。class=thumbnail，本身就是响应的。定高是为了整齐，如果图片本身规格不统一，又要响应，就矛盾了。
