Several main problems to be solved in image rendering

1. The picture is horizontal by default, and the picture center should be set.

max-height:100%;max-width:100%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)"

2. Need to rotate: the width of the picture is larger than the height, so the picture will be larger after rotation

// Get the actual width and height of the picture
var picWidth = $("#showPicContent").width(); 
var picHeight = $("#showPicContent").height();
if( picWidth > picHeight) {}

3. Confirm the size of the picture before rotation, because the size of the picture before rotation is still the same after rotation.

var picRate = picWidth / picHeight;
var windowRate = $(window).height() / $(window).width();
console.log(picRate, windowRate)
if (picRate <= windowRate) {
    PicMaxWidth = $(window).width() * picRate * 0.95
} else {
    PicMaxWidth = $(window).height()
}
$("#showPicContent").css("max-width", PicMaxWidth)

4. The rotation code should include the translate(-50%,-50%) set in the style, otherwise it will affect the centering effect.

// The rotation angle is positive clockwise and negative anticlockwise
$("#showPicContent").css({ "transform": "translate(-50%,-50%) rotate(90deg)" })

5. Judge the horizontal and vertical screen status of mobile phone

//Judge the horizontal and vertical screen status of the mobile phone:
function hengshuping() {
    //alert("hii")
    // window.orientation is only available on mobile phones, and web page test can't see the effect.
    console.log(window.orientation);
    //$("#showPicContent").css({"transform":"translate(-50%,-50%) rotate(0deg)"})
    if (window.orientation == 180 || window.orientation == 0) {
        //alert("vertical status! ""
        $("#showPicContent").css("max-width", PicMaxWidth)
        $("#showPicContent").css({ "transform": "translate(-50%,-50%) rotate(90deg)" })
    }
    if (window.orientation == 90 || window.orientation == -90) {
        //alert("screen status! ""
        $("#showPicContent").css("max-width", "100%")
        $("#showPicContent").css({ "transform": "translate(-50%,-50%) rotate(0deg)" })
    }
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

Complete code: click a picture to display the mask layer. There is a picture and a close button in the mask layer.

    <div style="position:fixed;background:rgba(0,0,0,1.0);top:0;right:0;bottom:0;left:0;z-index:1000;font-size:20px;color:#fff;display:none;" class="backdrop">
        <div style="position:absolute;right:10px;padding-top:5px;color:#F46608; cursor: pointer; Z-index: 100; "class =" closepic "> Close < / div >
        <img src="../../dist/img/QQ Picture 20190604084934.jpg" id="showPicContent" style="max-height:100%;max-width:100%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)" />
    </div>

        $("#showPic1").click(function() {
            if ($(".backdrop").css("display") == "none") {
                $(".backdrop").css("display", "block");
            }
            var picWidth = $("#showPicContent").width(); / / get the actual width and height of the picture
            var picHeight = $("#showPicContent").height();
            //Var picwidth = $("showpiccontent"). CSS ("width") / / get the width and height of the picture style
            //var picHeight = $("#showPicContent").css("height")

            console.log(picWidth, picHeight)

            if ($(window).width() < 700) {
                if (picWidth > picHeight) {
                    var PicMaxWidth
                    var picRate = picWidth / picHeight;
                    var windowRate = $(window).height() / $(window).width();
                    console.log(picRate, windowRate)
                    if (picRate <= windowRate) {
                        PicMaxWidth = $(window).width() * picRate * 0.95
                    } else {
                        PicMaxWidth = $(window).height()
                    }
                    $("#showPicContent").css("max-width", PicMaxWidth)
                    $("#showPicContent").css({ "transform": "translate(-50%,-50%) rotate(90deg)" })
                    //Judge the horizontal and vertical screen status of the mobile phone:
                    function hengshuping() {
                        //alert("hii")
                        // window.orientation is only available on mobile phones, and web page test can't see the effect.
                        console.log(window.orientation);
                        //$("#showPicContent").css({"transform":"translate(-50%,-50%) rotate(0deg)"})
                        if (window.orientation == 180 || window.orientation == 0) {
                            //alert("vertical status! ""
                            $("#showPicContent").css("max-width", PicMaxWidth)
                            $("#showPicContent").css({ "transform": "translate(-50%,-50%) rotate(90deg)" })
                        }
                        if (window.orientation == 90 || window.orientation == -90) {
                            //alert("screen status! ""
                            $("#showPicContent").css("max-width", "100%")
                            $("#showPicContent").css({ "transform": "translate(-50%,-50%) rotate(0deg)" })
                        }
                    }
                    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
                }
            }
        })


        $("#showPicContent, .closePic").click(function() {
            if ($(".backdrop").css("display") == "block") {
                $(".backdrop").css("display", "none");
            }
        })