How can I correctly center and size images so that they look good on both desktop and mobile without-CodePudding

I have a webpage with some images on it:

<head>
    <style type="text/css">
        #pictureframe {
            width: 100%
            background-color: #00000066;
        }

        #pictureframe > img {
            max-height: 90%;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: solid 2em #000000;
            border-radius: 1em;
            cursor: pointer;
            overflow-x: scroll;
        }

        .isHidden {
            display: none;
            visibility: hidden;
            z-index: -1;
        }

        .isHidden > img {
            z-index: -1;
        }

        .isVisible {
            display: block;
            visibility: visible;
            z-index: 99;
        }

        .isVisible > img {
            z-index: 100;
        }
    </style>
</head>
<body>
    <div id="pictureframe"><img src="" /></div>
    <div id="pictures">
        <!-- pictures here ... -->
        <div ><img src="./images/image01.jpg" width="100px" loading="lazy" /></div>
        <!-- pictures here ... -->
    </div>
    <script type="text/javascript">
        const pictureframe = document.getElementById('pictureframe');
        var pictureframe_img = pictureframe.children[0];

        var imgarray = document.getElementById('pictures').querySelectorAll('img');
        for(let i=0; i<imgarray.length; i  ){
            imgarray[i].addEventListener('click', function(){
                pictureframe.classList.replace('isHidden','isVisible');
                pictureframe_img.src = imgarray[i].src;
            });
        }

        pictureframe_img.addEventListener('click', function(){
            pictureframe.classList.replace('isVisible','isHidden');
        });
    </script>
</body>

This works fairly well, in that when I click the image, the pictureframe is "front and center", and when I click the pictureframe, it does disappear nicely.

However, when I go back and forth between mobile, things start to look bad.

I have the max-height set, which works well on desktop, but on mobile, the edgs are clipped off. If I reverse it, set the max-width then it will also work fine on desktop, but the top and bottom will be clipped off on mobile.

I cannot seem to find the right balance so that it looks good on desktop and mobile. It seems that I may need to dynamically set either the max-height or max-width depending, but I am not sure if this is the correct way to go.

EDIT:

Here is a jsfiddle with a working example:

https://jsfiddle.net/1uqgoc8w/

CodePudding user response：

If I understand correctly You want to make sure it shows the entire frame in. WRD.

Try using the flex box

    #pictureframe {
        /* width: 100% */
        background-color: #00000066;
    }

    #pictureframe > img {
        /* max-height: 90%; */
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: solid 2em #000000;
        border-radius: 1em;
        cursor: pointer;
        overflow-x: scroll;
        display: flex;
        width: 80%;
    }

JSFiddle

First you had an issue missing a closing semicolon on the width which broke the background (Unrelated but keep a linter handy for this stuff)

I kept your fixed positioning and added a display: flex to make use of the entire viewport real estate and set the width to 80% so that it creates a padding from the viewport edges. If you want it to extend to the edges, keep it at 100% width.

If you are looking to fill the entire screen, you are not going to be able to do this without clipping unless you are resizing your screen proportionally with the image size, you can however put the images in a json file and resource to them from css as background-image: url ('PATH'); and make sure that you set the background-size; cover. But again, this also clips

Vieport proportion never equals to image proportions

CodePudding user response：

Working Example if understood correctly : enter link description here

#pictureframe {
    width: 100%
    background-color: #00000066;
}

#pictureframe > img {
    max-height: 90%;
    position: fixed;
    top: 50%;
    left: 50%;
    right:50%;
    transform: translate(-50%, -50%);
    border: solid 2em #000000;
    border-radius: 1em;
    cursor: pointer;
    overflow-x: scroll;
}

just add top,left & right position to 50%