【小程序】使用view标签，显示图片的一部分

先看最终效果：

画圈的位置是图片，原始图片长这样：

产品希望只展示图片的上半部分，我首先使用image标签 mode的top模式，结果如下：

确实是显示了上半部分，但是图片两边被切割了。所以image标签+mode=top这个方案不行。

---

跟同事讨论后，选择了使用view.设置 background image， 再使用background-position来实现：
wxml:
<view class="questionImg" style="background: url({{item.question_image[0]}}) "> </view>
wxss:

.questionImg {
  width: 100%;
  height: 222rpx;
  background-size: 120% auto !important;
  transition: all 0.3s;
  background-position: left -80rpx top 0rpx !important;
  border: 2rpx solid rgb(246, 246, 246);
}

注意background-size 和 background-position
如果不设置 这两个属性的效果：

设置background-size 的效果：

产品想去掉题目前面的序号，我们再设置 background-position: left -80rpx top 0rpx !important;
效果如下：

成功去掉了序号

总结一下：view标签设置background 的image, 再通过background-size 和background-position可以调整图片显示的范围，注意需要加!important