Resize Images as Viewport Resizes Without Sides Being Cut Off

Resize Images as viewport resizes without sides being cut off

you use:

max-width: 100%;
height: auto;
width: auto; /* for ie9 */

This will make whatever you assign the css to resize dynamically to fit its container based on the max-width: 100% statement. If you would like it differently, change the max width statement accordingly.

CSS Display an Image Resized and Cropped

You could use a combination of both methods eg.

    .crop {        width: 200px;        height: 150px;        overflow: hidden;    }
    .crop img {        width: 400px;        height: 300px;        margin: -75px 0 0 -100px;    }

    <div class="crop">        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">    </div>

Making the right side of an image cut out accordin to screen resolution

Here you go.

Add the below code to your CSS. This will cut images on the right side.

#apDiv1 {
    width:100%;
    white-space:nowrap;
    overflow:hidden;
}

When resizing window, site scales but then starts to crop off the right side

I have only two ideas to fix that..

first, try to make some headers smaller..

second(main), I thing that You haven't got responsive images, but I don't know, try: img {max-width: 90%; height: auto;}, that should work. :)

Vertical image Resize. (Flex or vh)

I think I have It!! Both Portrait and Landscape. Granted, because of the use of vh / vw, It may have issues with mobile-browser header bars. :/ Maybe there's some Hacky way to fix. but yeah this is looking good so far. I'd have to test on mobile to see further. Galaxy fold it seems to cut off just a bit off the bottom (just a few px.) In addition, Id take all this CSS and wrap it into a media screen itself, then transitioning into a scrollable webpage... or maybe not. Anyways here's the code... Thank you Chizaram for all you're help! I'm gonna buy you a gift card on payday if you like!

ANSWER:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webApp</title>
    <style>
        * {
            box-sizing: border-box;
            padding: 0; 
            margin: 0; 
        }

        body {
            height:100%; 
            width: 100%; 
            overflow: hidden;
        }

        .container {
            background-color: rgb(162, 162, 162);
            display: flex;
            flex-direction: column;
            min-height: fit-content;
            height: 100vh;
        }

        .images{
            background-color: aqua;
            flex-grow: 1; 
            flex-shrink: 3;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        
        }

        .mainImage img,
        .secondaryImage img {
            object-fit: contain;
            display: flex;
            justify-self: center;
        }

    .mainImage img {
        max-height: 25vh;
    }

    .secondaryImage img {
        max-height: 20vh;
        width: 100%;
        max-width: 90vw;
    }

    .mainImage {
        background-color: rgb(128, 248, 0);
        max-height: 60vw;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        object-fit: contain;
    }

    .secondaryImage{
        background-color: rgb(133, 201, 153);
        min-height: 30%;
        width: 90vw;
        max-height: 40%;
        margin: 0 auto;
        display: grid;
        align-content: center;
        object-fit: contain;
    }

    .allButtons {
        display: flex;
        flex-direction: column;
        border: 2px red solid;
        height: 30vh;
        flex-grow: 2; 
        flex-shrink: 1;
    }

    .mainButtons{
        display: flex;
        flex-direction: column;
        width: 70%;
        justify-content: space-evenly;
        /* background-color: rgb(249, 149, 0); */
        padding: 5px 0px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        height: 100%;
    }

    button {
        background-color: rgb(205, 205, 0);
        border: black solid 2px;
        border-radius: 5px;
        width: 100%;
        color: white;
        padding: 2em;
        display: block;
        min-width: fit-content;
    }

    .bottomButtonContainer {
        width: 100%;
        display: flex; 
        align-items: center;
        justify-content: end;
        margin-top: auto;
    }

    .bottomButton {
        background-color: rgb(101, 103, 0);
        border-radius: 5px 5px 0px 0px;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        height: 40px;
    }

    @media only screen
    and (max-device-width: 1023px)
    /* and (min-device-pixel-ratio : 2.0) */
    and (orientation: landscape) {

        button {
            padding: 1em;
        }

    }
    </style>
</head>

<body>
    <div class="container">
        <div class="images">
            <span class="mainImage">
                <img src="https://i.ibb.co/5YMMtJT/circle-logo-color.png" alt="circle-logo-color">
            </span>
            <span class="secondaryImage">
                <img src="https://i.ibb.co/H4qPCc9/logo-color.png" alt="logo-color">
            </span>
        </div>
        <div class="allButtons">
            <div class="mainButtons">
                <button>SIGNUP!</button>
                <button>LOGIN!</button>
            </div>
            <div class="bottomButtonContainer">
                <button class="bottomButton" style="white-space: nowrap;">LEARN MORE</button>
            </div>
        </div>
    </div>
</body> 
</html>

Resize Images as Viewport Resizes Without Sides Being Cut Off