更改移动视图时图像的位置

position of my image when i change my mobile view

本文关键字：图像 位置 视图 移动      更新时间：2023-09-26

我的图像位置有一个小问题，所以问题来了，我有我的纵向视图，我滑动我的图像，当我切换视图（纵向到横向）时，我的图像不再居中。我的问题是，我的图像的边缘仍然与肖像视图相同，我不知道如何改变这一点。

我已经试着改变我的图像边距，但没什么可做的，它仍然是我使用的第一个视图边距。

这就是Js/Jq:

function puceTransition(front) {
    var wrapImg = $('.wrapImage');
    var margeLeft = 0;
if(front) {
    if (stateImg == "back") {
        stateImg = "front";
        margeLeft = $('#myImageBack').css("marginLeft").replace("px", "");
        $('#frontImg').addClass('select');
        $('#backImg').removeClass('select');
        $('#myImageBack').animate({opacity: "0.5", marginLeft: ((imgFront + widthImg1 + myButtonRight)) + "px"}, "normal");
        $('#myImageFront').animate({opacity: "1.0", marginLeft: parseInt(margeLeft) + "px"}, "normal");
        $('.imgTitleBack').hide();
        $('.imgTitleFront').show();
        $('#imgButtonLeft').animate({opacity: "0.5"});
        $('#imgButtonRight').animate({opacity: "1.0"});
    }
} else {
    if (stateImg == "front") {
        stateImg = "back";
        margeLeft = $('#myImageFront').css("marginLeft").replace("px", "");
        $('#backImg').addClass('select');
        $('#frontImg').removeClass('select');
        $('#myImageFront').animate({opacity: "0.5", marginLeft: (((-imgFront) + (-widthImg1) + myButtonLeft)) + "px"}, "normal");
        $('#myImageBack').animate({opacity: "1.0", marginLeft: parseInt(margeLeft) + "px"}, "normal");
        $('.imgTitleBack').show();
        $('.imgTitleFront').hide();
        $('#imgButtonLeft').animate({opacity: "1.0"});
        $('#imgButtonRight').animate({opacity: "0.5"});
    }
}
}

这是css：

    .myImage { display: block; position: relative; width: 450px; margin: 0 auto; }
    .myImage.second { margin: -240px 0 0 670px; }
    .myImageAirport { display: block; position: relative; width: 450px; margin: 0 auto; }
    .myImageAirport.second { margin : -220px 0 0 670px; }

只需将此css添加到图像类中

.myImage {
display: block;
margin-right: auto;
margin-left: auto;
}

它应该起作用！

相关文章：