微信小程序,写一个例子,把长方形和正方形的图片,都正圆形显示
时间: 2024-01-05 20:04:27 浏览: 137
一个图片显示小程序
5星 · 资源好评率100%
好的,以下是一个简单的微信小程序代码示例,可以将长方形和正方形的图片都正圆形显示:
1. 在 `app.json` 文件中添加如下配置:
```json
{
"usingComponents": {}
}
```
2. 在 `index.wxml` 文件中添加如下代码:
```html
<view class="container">
<image class="circle" src="/images/rect.jpg" mode="aspectFill"></image>
<image class="circle" src="/images/square.jpg" mode="aspectFill"></image>
</view>
```
3. 在 `index.wxss` 文件中添加如下代码:
```css
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 100vh;
}
.circle {
width: 150rpx;
height: 150rpx;
border-radius: 50%;
overflow: hidden;
}
```
4. 将长方形和正方形的图片分别保存为 `rect.jpg` 和 `square.jpg`,并放置在小程序的 `images` 文件夹下。
这样,就可以实现将长方形和正方形的图片都正圆形显示的效果了。
阅读全文