先看最终效果:
画圈的位置是图片,原始图片长这样:
如果我们直接使用加载图片,mode的四种模式
产品希望只展示图片的上半部分,我首先使用image标签 mode的top模式,结果如下:
确实是显示了上半部分,但是图片两边被切割了。image标签+mode=top这个方案不行。
跟同事讨论后,选择了使用view.设置 background image, 再使用background-position来实现:
wxml:
<view class="questionImg" style="background: url({{item.question_image[0]}}) top no-repeat"> </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
如果不设置 这两个属性的效果
标签:image,246,background,position,top,图片
From: https://www.cnblogs.com/tufei7/p/17233047.html