小程序实现图片垂直居中，水平居中并且自适应宽高

红太狼 2022-03-18 14:37 440阅读 0赞

**效果如下图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70 1][]

**html部分：**

</view>

**css部分：**(css这样设置虽然可以垂直居中，水平居中，但是图片是变形的，所以需要用到js来修改图片宽高)

.imgCon\{

width: 160rpx;

height: 160rpx;

display: inline-block;

vertical-align: top;

margin-right: 20rpx;

overflow: hidden;

position: relative;

.imgCon image\{

width: 160rpx;

height: 160rpx;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

**js部分：**

//图片宽高处理

imgLoad:function(e)\{

var that = this;

console.info(e.detail);

var imgwidth = e.detail.width;

var imgheight = e.detail.height;

var width,height;

var ratio;

if(imgwidth>imgheight)\{

ratio = imgwidth / 160;

width = 160;

height = imgheight / ratio;

\}else\{

ratio = imgheight / 160;

height = 160;

width = imgwidth / ratio;

console.info("计算后的宽高", width, height);

that.setData(\{

width:width,

height:height

\})

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190221111642297.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70 1]: /images/20220318/807dd80ae9d94ff7a0c8065927f38d7e.png