菜单
展开边栏 收起边栏

图片拉伸,不想裁剪,你可以这样子做

1.先给你的图片外面加一个DIV,设置好想要的高宽,例如我们想要的图片宽度为 240px,高度为183px,那么写法如下:

<div style="width: 240px; height: 183px; overflow: hidden"> <!--div设置好需要的高宽-->
	<img src="img.jpg">              
</div>
<script>
//列表图按比例片无拉伸处理
$('div').each(function (){
	var img = $(this).find('img'); //获取图片
	var i_w = $(this).width();  //获取需要的图片宽度
	var i_h = $(this).height(); //获取需要的图片高度
	var b = i_w/i_h;            //计算需要的图片高宽比(宽度/高度)
	var w = img.width();        //获取图片原始宽度
	var h = img.height();       //获取图片原始高度
	var vs = w/h;               //计算图片比例
	if (vs < b){  //计算图片高宽比,如果高宽比比较高
		img.css({width:i_w+'px'});       //设置图片宽度为目标宽度
		var h = (img.height() - i_h) / 2; //计算图片减去目标高度后剩余高度除以2
		img.css({marginTop:'-'+h+'px'});  //向上移动,保持图片垂直剧中	
	}else{       //计算图片高宽比,如果高宽比比较宽
		img.css({height:i_h +'px'});        //设置图片高度为目标高度
		var w = (img.width() - i_w) / 2;  //计算图片减去目标宽度后剩余宽度除以2
		img.css({marginLeft:'-'+w+'px'}); //向左移动,保持图片左右剧中
	}
});
 </script>

按照上面的做法,你只要给图片外面的DIV设置好想要的图片高宽即可,然后图片会根据你设置好的尺寸进行上下或左右剧中,这个取决于你的图片实际尺寸了。例如你的图片实际高度大于你设置的高宽比,它会以你想要的宽度展示,而高出的部分会自动居中显示,而宽度高出你想要的高宽比,则会按照你想要的高度进行显示,宽出来的部分则会自动居中显示。这样免去了自动裁剪的流程,在前端就可以直接实现你想要的效果。但是图片如果特别特别大的话,原则上是会影响访问速递,但是通常来说可以正常上传到服务器上的图片也不会很大,这个取决于你自己服务器或网站的设置了。

如果你还有更好的方法的话欢迎留言讨论!

最终效果:

补充:

还有一个单纯用css实现的方法,但是IE是不支持的!

img{ width: 240px; height: 183px; object-fit:cover ;}

只需要这么一句就OK了!下面是 object-fit 属性的一些演示效果:

Copyright © 2008-. JiangFei.net all rights reserved 苏ICP备18062911号