这段代码如何设置图片的大小且图片不变形view class=courses-message van-card thumb=coursessmallPic view slot=title class=courses-title coursestitle view

可以使用 CSS 样式设置图片的大小，并使用 object-fit 属性来控制图片的显示方式，以避免图片变形。

例如：

<view class="courses-message">
    <van-card>
        <image 
            src="{{courses.smallPic}}" 
            class="courses-image"
        />
        <view slot="title" class="courses-title">
            {{courses.title}}
        </view>
        <view slot="num" class="courses-num">
            <view class="courses-price">
                ￥{{courses.price}}
            </view>
            <view class="courses-sale">
                <van-stepper 
                    value="{{buyNum}}" 
                    bind:change="onBuyNumChange"
                />
            </view>
        </view>
    </van-card>
</view>

.courses-image {
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 比例 */
    object-fit: cover;
}

这里使用了一个固定的宽高比例（16:9），可以根据实际需要进行调整。通过设置 width 和 height，和一个固定的宽高比例来设置图片的大小，使用 object-fit: cover 属性来控制图片的显示方式，保持比例不变的同时，将图片缩放到尽可能大