uniapp图片不裁剪,宽度100%铺满,高度自适应,由图片撑开盒子的代码
时间: 2024-03-16 12:46:35 浏览: 317
C# 源代码对图片自由裁剪功能
你可以在uniapp中使用以下代码实现图片宽度100%铺满,高度自适应,由图片撑开盒子的效果:
```html
<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` 属性让图片铺满盒子。
阅读全文