css如何实现图片响应式等比例缩放，裁剪

 

　　<div class="bg_picWrapper"  :style="{backgroundImage:'url('+img+')'}">------------vue中动态绑定背景图片显示的方式

　　　　<div class="bg_pic"></div>

　　</div>

　　在项目中我们经常会跟图片打交道，遇到显示图片的需求，我们大多数人的做法通常都是用<img>（在小程序中用<image>）标签，利用这个标签的src属性绑定图片显示；但是这样会出现一个问题：就是图片的显示是否会等比例显示且不会出现图片的拉伸（或者压缩）效果？如果你对图片等比例显示不是特别清楚，那么你会遇到一个问题：ui给的设计图中图片是完整显示，而你做出来的页面中，图片会出现拉伸压缩的效果，也许你会到网上找插件，这个裁剪能够满足将图片按给定的框框裁剪，这样就不用担心图片显示的问题了？真的吗？那我只能说你这是有点杀鸡用牛刀，小题大作了。为什么这么说？

　　关于图片的宽度与高度的赋值我们知道有两种方式：1、直接在css中设置图片的的width、height属性，2、在js中设置图片的style.width。不过我这个人一致都觉得能够用css解决的问题就不要用js来解决，所以我会选第一种方式：直接在css中设置图片的width、height值。为什么要在css中设置图片的width、height值呢？因为在css中，如果设置图片的width、height中的一个值，会将图片等比例缩放，并且不会出席那那所谓的压缩与拉伸问题。而且我们要的不就是这种效果吗？所以这种方式离我们要的效果又进了一步。但是这还不够，我们需要的不仅是图片不拉伸压缩，还要图片你能够绝大部分都可以在给定的框框内显示出来，图片的绝大部分显示出来，也就是说可以有一次部分是可以被遮住的了？css的图片图片不就有这种尺寸的属性吗！background-size:cover/contain。代码如下：

　　.bg_pic{

　　　　width:100%;

　　　　height:100%;

　　　　background-position: center  center;

　　　　background-repeat: no-repeat;

　　　　background-size:cover;

　　　　-webkit-background-size:cover;

　　　　-moz-background-size:cover;

　　}

　　如果你直接拿着这个代码去试，这还存在着一点小问题：就是背景图片没有完全显示在bg_picWrapper框中，将height:100%;改为height:0;padding-bottom:100%即可；

可能自己经验尚浅。如果有不同的意见或者有更好的解决方法可以在下面留下您最宝贵的建议或者解决方式，欢迎交流