微信小程序图片通过calc计算等比列适配
时间: 2023-12-30 22:59:23 浏览: 109
微信小程序-微信小程序中的图片自适应宽高的计算类
对于微信小程序图片的等比缩放,我们可以通过使用CSS的calc函数来实现。具体操作步骤如下:
1. 在CSS中设置图片的宽高比(如16:9)。
2. 使用calc函数计算图片的高度,将其设为100%的宽度与比例宽高比的除数的乘积。
例如,针对16:9的图片,其CSS代码应该类似于:
.image {
width: 100%;
height: calc(100% / (16/9));
}
这样就可以实现图片的等比缩放,保持原比例不失真。
阅读全文