<img>标签没有mode属性（微信小程序和uni-app有mode扩展属性） <img>如何使图片等比自适应，-526互联

**在HTML标准中，<img>标签没有mode属性**。<img>标签的主要作用是在HTML页面中插入图像，它有一些常用的属性，例如src、width、height、alt等。

但是，在一些前端框架中，例如**微信小程序和uni-app，<img>标签被扩展了一些属性，其中就包括了mode属性。**在这些框架中，<img>标签的mode属性用于控制图片的裁剪和缩放方式，例如：

html
Copy
<!-- 微信小程序中的使用方式 -->
<image src="image.png" mode="aspectFill"></image>

<!-- uni-app中的使用方式 -->
<img :src="imageUrl" mode="aspectFit" />

如何使图片等比自适应，不拉伸

使用object-fit属性：
html
Copy
<!-- HTML代码 -->
<div class="container">
  <img src="image.png">
</div>

<!-- CSS代码 -->
.container {
  width: 100%;
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
该方法通过设置**object-fit属性为contain，使图片在保持宽高比的前提下，缩放以适应容器**。

属性