【小程序】使用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