小程序自定义弹出层，无法固定图片位置
发布于 5 年前 作者 junzhu 6807 次浏览 来自 问答
.isRuleShow{
    display: block;
}
.isRuleHide{
    display: none;
}
.ruleZhezhao{
    height: 100%;
    width: 100%;
    position: fixed;
    background-color:rgba(0, 0, 0, .5);
    z-index: 2;
    top: 0;
    left: 0;
}
.ruleZhezhaoContent{
  position: fixed;
    width: 800rpx;
  height: 1000rpx;
}
.ruleZhezhaoimage{
  width: 100%;
  height: 100%;
   
}
 
.ruleHide{
    height: 60rpx!important;
    width: 60rpx!important;
    position: absolute;
    top: -20rpx;
    right: -20rpx;
}
<view class="ruleZhezhao {{isRuleTrue?'isRuleShow':'isRuleHide'}}">
       <view class='ruleZhezhaoContent'>
           <image class='ruleZhezhaoimage' src='https://www.xxxxx/upload/3369f6d59bf2463fa9b4665fcd9b4d64_0429.png' ></image>
           <image src='' class='ruleHide' bindtap='hideRule'></image>
       </view>
   </view>

如上图，怎么改css才能让图片固定在中间，并且可以增加宽度和高度。现在一增加高度或宽度就变形。margin：0 auto；也不好使

1 回复

.ruleZhezhao{

    height: 100%;

    width: 100%;

    position: fixed;

    background-color:rgba(0, 0, 0, .5);

    z-index: 2;

    top: 0;

    left: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.ruleZhezhaoContent{

}

.ruleZhezhaoimage{

    width: 800rpx;

}

<image class=“ruleZhezhaoimage” src=“https://www.xxxxx/upload/3369f6d59bf2463fa9b4665fcd9b4d64_0429.png” mode="widthFix"></image>

回到顶部