'Vertical image Resize. (Flex or vh)


Hey! Thanks for reading! I've got a web-app login screen. I'm focusing on creating a responsive app-like login page. (no scroll etc)

Issue description:

  • With a viewport-width of 300px, at 463px and shorter viewport heights, all items fill the entirety of the screen, and the content at the bottom of the page begin to get cut off.

  • The same can be said with 528px and 650px height.

  • (so this tells me it's scaling to a particular aspect ratio (phone portrait to relatively squarish aspect ratios. At landscape aspect-ratios, the images become ridiculously big - ...expected but undesired))

Goal: Instead, I would simply like the images to shrink in height and maintain their aspect ratio when the viewport height is changed. (to support the aspect ratio provided by the flex-grow/shrink) as opposed to overflowing and changing that ratio.

note: For those who'd like a simpler example: I think the example is relatively simple. Could it be simpler?, yeah most likely. I'm, not entirely sure what I'd make simpler though.

Codepen: https://codepen.io/gold240sx/pen/eYVdGag (I might suggest to turn devtools on to get a thin width since the design right now is really meant for portrait phones.)

It's quite a bit easier just to copy and paste into whatever editor you prefer.

ORIGINAL:

<!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>Document</title>
 <style>
    * {
        box-sizing: border-box;
    }

    body {
        height:100%; 
        width: 100%; 
        padding: 0; 
        margin: 0; 
        display: flex; 
        flex-direction: column; 
        justify-content: center;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .container {
        background-color: rgb(162, 162, 162);
        display: flex;
        flex-direction: column;
        min-height: fit-content;
        height: 100%;
    }
    .images{
        background-color: aqua; 
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 100%; 
        flex-grow: 3;
        flex-shrink: 3;
    }

    span img {
        max-width: 100%;
        max-height: 100%;
    }
    .mainImage {
        background-color: rgb(128, 248, 0);
        display: flex;
        max-width: 70%;
        max-height: 100%;

        margin-left: auto;
        margin-right: auto;
    }
    .secondaryImage{
        background-color: rgb(133, 201, 153);
        max-width: 90%;
        position: relative;
        width: auto;

        margin-left: auto;
        margin-right: auto;
    }

    .allButtons {
        background-color: rgb(255, 132, 0);
        display: flex;
        flex-direction: column;
        border: 2px red solid;
        flex-grow: 2;
        flex-shrink: 2;
    }

    .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: 20px;
        display: block;
    }


    .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;
    }


 </style>
</head>
<body>
    <div class="container">
     <div class="images" style="background-color: aqua; width: 100%; flex-grow: 3; flex-basis: 1;">
      <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>

UPDATED CSS (loosely based upon the initial answer provided by Chizaram) - image scale achieved - image aspect ratio not guaranteed yet -:

        }
    * {
        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;
        height: 70vh; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .mainImage img,
    .secondaryImage img {
        max-height: 100%;
        max-width: 100%;
    }

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

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

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

    .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: 10px;
        display: block;
    }


    .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;
    }
htmlcssflexboxresponsive-design


Solution 1:[1]

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>

Solution 2:[2]

UPDATE:

Do not forget to remove the old inline styles you declared in the .images div, so they don't revert to previous styling:

<div class="images">...</div> <!-- Remove old inline styles -->

ANSWER:

To achieve this, here are the changes you need to make to your code:

(Please note that I use ellipsis ... to indicate segments of the original code which I did not change, and also for brevity.)

  1. Remove flex properties from the body selector as they are not necessary here. The .container div houses everything on the page. I also cleaned the body rule-set a little by moving the padding and margin properties to the universal selector rule-set as well as using the briefer overflow declaration.

    * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

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

  2. Leave flex properties in the container selector instead and change its height to 100vh to take up full viewport of the screen.

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

  3. Give the .images div a height of 70vh and set the vertical and horizontal alignments to center. I also removed the flex-grow and flex-shrink properties because they were not necessary in order to achieve the desired result.

    .images {
    ...
    height: 70vh;
    display: flex;
    flex-direction: column; 
    justify-content: center; /* Vertical alignment in column flex-direction */ 
    align-items: center; /* Horizontal alignment in column flex-direction */
}

  4. Set max widths and heights for center images and their parent divs (totaling 100%). Flex and positioning properties aren't necessary here as well since they are affected by their parent div (.images).

    .mainImage {
    ...
    max-width: 60%;
    max-height: 60%;
    margin: 0 auto;
}

.secondaryImage {
    ...
    max-width: 60%;
    max-height: 40%;
    margin: 0 auto;
}

  5. Set object-fit type to contain for images. I've also changed the elements from spans to divs to structure the html better. The styles here were previously within the span img rule-set. Copy its styles in this new rule-set and delete it.

    .mainImage img,
.secondaryImage img {
    ...
    object-fit: contain;
}

  6. Set the height of the .allButtons div to 30vh to take up the remaining height of the viewport.

    .allButtons {
    ... 
    height: 30vh;
    ...
}

  7. Reduce padding for buttons on smaller screen sizes to solve the height problem. I added in a media query to adjust to original button size on larger screens. Feel free to adjust the breakpoint height to any value you desire.

    button {
    ...
    padding: 10px;
    ...
}

@media screen and (min-height: 620px) {
    button {
        padding: 20px;
    }
}

The HTML

   <div class="mainImage">
     ...
   </div>
   <div class="secondaryImage">
     ...
   </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions