uniapp图片不裁剪，宽度100%铺满，高度自适应，由图片撑开盒子的代码

你可以在uniapp中使用以下代码实现图片宽度100%铺满，高度自适应，由图片撑开盒子的效果：

<template>
  <div class="container">
    <img :src="imageUrl" class="image" mode="aspectFill" />
  </div>
</template>

<style>
.container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

<script>
export default {
  data() {
    return {
      imageUrl: 'your-image-url'
    }
  }
}
</script>

其中，`.container` 类设置了宽度100%，高度自适应，并使用 flex 布局使图片垂直居中；`.image` 类设置了宽度100%，高度100%，并使用 `object-fit: cover` 属性让图片铺满盒子。

相关问题

背景图片100%铺满

要让背景图片100%铺满，可以使用CSS属性background-size: cover;。这个属性会自动调整背景图片的大小，使其完全覆盖背景区域，并保持图片的宽高比。例如：

body {
  background-image: url('background.jpg');
  background-size: cover;
}

这样就可以让背景图片铺满整个页面了。需要注意的是，如果图片的宽高比与屏幕的宽高比不同，有可能会出现部分图片被裁剪的情况。

uniapp背景图片自适应

根据提供的引用内容，没有直接回答uniapp背景图片自适应的方法。但是，我们可以根据uniapp的文档提供的信息来回答这个问题。

在uniapp中，可以使用`background-image`属性来设置背景图片。为了让背景图片自适应，可以使用`background-size`属性。具体来说，可以将`background-size`设置为`cover`，这样背景图片会被缩放以完全覆盖背景区域，可能会裁剪图片的某些部分。另一种方法是将`background-size`设置为`contain`，这样背景图片会被缩放以适应背景区域，可能会留有空白区域。

下面是一个示例代码，展示如何在uniapp中设置自适应背景图片：

<template>
  <div class="background" style="background-image: url('/static/background.jpg'); background-size: cover;">
    <!-- 页面内容 -->
  </div>
</template>

<style>
.background {
  width: 100%;
  height: 100%;
}
</style>