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

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 属性的一些演示效果:

 

完!

一个分享交流经验与技巧个人博客,提供最专业的资源收集分享平台免费资源下载网站。
28APK资源网 » 网页图片被拉伸,不想裁剪,你可以这样子做

Leave a Reply

  • 139会员数(个)
  • 4935资源数(个)
  • 0本周更新(个)
  • 0 今日更新(个)
  • 3990稳定运行(天)

提供最优质的资源集合

立即查看 了解详情