在微信小程序中,要实现图片的平放(即不保持纵横比缩放,使图片的宽高完全拉伸至填满 image 元素),你可以使用 `scaleToFill` 缩放模式。以下是一个示例代码,展示如何在小程序中设置图片平放:
```html
```
在这个示例中,`.image-container` 是图片的父容器,`.image` 是图片本身。通过将 `mode` 设置为 `scaleToFill`,图片会等比例缩放以填满整个容器。
如果你希望图片在容器中居中显示,可以使用 `display: flex` 和 `align-items: center` 以及 `justify-content: center` 来实现:
```css
/* wxss */
.image-container {
width: 100%; /* 设置容器宽度 */
height: 100%; /* 设置容器高度 */
background-color: f0f0f0; /* 设置容器背景色,以便观察效果 */
}
.image {
width: 100%; /* 图片宽度设置为100% */
height: 100%; /* 图片高度设置为100% */
}
```
通过这种方式,图片将在容器中水平和垂直居中显示。