svg格式图片在<image>标签下不保持纵横比缩放，为什么我缩放不了？

Question

这是wxml image默认mode就是scaleToFill

 <block wx:for="{{tasks}}" wx:key="name" >
    <!-- 这里的height按理讲不应该放在task里面，这是现实相关的，应该在js处理 -->
    <block  wx:if="{{index%2==0}}">
        <view class='item' >
            <view style="position:relative;top:0;left:0;width:315rpx;height:850rpx">
            <image class ="taskBgimg" src="/images/taskBgImg.svg" style='width:100%;height:850rpx;z-index:-1'/>
            <template is="taskModel" data="{{...item}}"/>
        </view>
    </view>
</block>

下面是css

.item{
    margin: 15rpx;
}
.taskBgimg{
    position: absolute;
    top: 0;
    left: 0;
}

结果图片仍然按照原来比例

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

<image> 标签的 src 属性用于设置图像源。如果你使用了 scaleToFill 模式，那么图像将不会自动调整其大小以适应容器的高度或宽度。

要解决这个问题，你可以尝试以下方法：

1. 改变 src 属性：将 src 设置为 data-src 属性，这会根据 srcset 或 sizes 规则自动生成合适的尺寸。例如：

   <image class="taskBgimg" src="{{data.src}}" />
   

2. 调整 width 和 height 属性：在 CSS 中调整这些属性来确保它们与图像的实际大小相匹配。

   .taskBgimg {
       width: calc(100% - 40px); /* 偏移量 */
       height: calc(100% - 40px);
       border-radius: 10px; /* 自定义边框圆角 */
   }
   

3. 使用 object-fit 属性：通过将 object-fit 设置为 cover，可以确保图像填充整个容器，而不仅仅是围绕容器边缘。这样，图像将在容器高度和宽度内均匀分布，无需手动调整。

   .taskBgimg {
       object-fit: cover;
   }
   

4. 使用 display 属性：如果图像过大且超过容器的宽度，则可能无法正确显示。尝试将 display 设置为 none，以便只在需要时显示图像。

   .taskBgimg {
       display: none;
   }
   

5. 调整布局：如果你正在使用 flexbox 或 grid 来排列图像，确保它们之间的间距合理，以免导致图像过小或过大的问题。

   <view class="items-container">
       <view class="item" style="margin-bottom: 20rpx;">
           <image src="/images/image1.png" alt="Image 1"></image>
       </view>
       <view class="item" style="margin-bottom: 20rpx;">
           <image src="/images/image2.png" alt="Image 2"></image>
       </view>
   </view>
   

希望这些建议能帮助你解决问题！