图片的background position

Posted 2023-03-19 土匪7

先看最终效果：

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

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

确实是显示了上半部分，但是图片两边被切割了。image标签+mode=top这个方案不行。
跟同事讨论后，选择了使用view.设置 background image， 再使用background-position来实现：
wxml:
<view class="questionImg" > </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
如果不设置 这两个属性的效果