最近在优化细节，总结出一个做风格布局图片很有用的代码分享给大家。

大家先看下面的图片。因为用户上传的图片尺寸根本没办法统一，这也是无法避免的问题。

导致我们做风格的时候，要么就把缩略图拉扯成固定的比例，这就会导致图片变形。

如果不想变形，按固定的比例缩放，就会出现左右或上下白边，导致页面不好看。

为解决这个问题，今天早上特意做了一个总结，可以实现下图的效果，任意比例调取任意尺寸的图片，都可以填充满你的风格布局。而不会出现白边或者拉扯变形。

<style type="text/css">
.pic2{
	display: inline-block;
    width: 100px;
    height: 300px;
    overflow: hidden;
	border:1px solid red;
	position:relative;
	margin:8px
}
.pic2 img {
	position:absolute;  
}
</style>
<div class="pic2"><img src="/public/uploads/images/20200630/1_202006301016251399c.jpeg" onload="set_img_size(this,100,300)" /></div>

关键JS函数如下：

<script type="text/javascript">
function set_img_size(that,w,h){
	var obj = $(that);
	var o_w =  obj.width();
	var o_h =  obj.height();console.log('s',o_w/o_h);
	if( (o_w>o_h && o_w/o_h>w/h) || (o_w<o_h && o_w/o_h>w/h) ){
		var left = (o_w*h/o_h-w)/2;
		obj.css({'height':h+'px','left':-left+'px'});		
	}else{
		var top = (o_h*w/o_w-h)/2;
		obj.css({'width':w+'px','top':-top+'px'});
		
	}	
}
</script>

更多文章请关注《万象专栏》