How to keep divs at fixed size when window is resized while maintaining aspect ratio?

Question

How can I make the left and right divs stay the same, with the same aspect ratio and side by side, when resizing the window? (And they just stay that way no matter how much I resize the window).

Like this:

Here is my code:

body {
    background: #222222;
}

#wrap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;

    @media screen and (max-width: 1080px) {
        height: auto;
    }

}

.input_style {
    position: relative;
    display: block;
    width: 100%;
    height: 9.64vh;
    margin-bottom: 3.91vh;
    background-color: #222222;
    background-image: none;
    border-bottom: .13vh #fafafa solid;
    font-size: 4.17vh;
    font-weight: normal;
    line-height: 9.64vh;
    letter-spacing: -.13vh;
    color: #fafafa;

    @media screen and (max-width: 1675px) {
        height: 7.81vh;
        line-height: 7.81vh;
        font-size: 3.13vh;
    }

}

.cont {
    display: flex;
    width: 100%;
    height: 100vh;
    margin: 50% auto;
    aspect-ratio: 1/1.4;
    box-sizing: border-box;

}

.cont section {
    display: inline-block;
    float: left;
    height: 100vh;
}

.cont .left {
    position: relative;
    width: calc(50% - 6.72vh);
    padding: 5.21vh;
    background-color: #ffffff;
}

.cont .right {
    position: relative;
    width: calc(50% + 6.72vh);
    padding: 5.21vh;
    box-shadow: -1.52vh 0 3.8vh -.95vh rgba(0, 0, 0, .4);
}

.index .cont .left .inner {
    display: flex;
    flex-direction: column;
    width: auto;
    height: calc(100vh - 15.11vh);
    justify-content: center;
    align-items: center;
}

.index .cont .left .tbl_row {
    display: table-row;
}

.index .cont .left .day {
    display: table-cell;
    height: 4.17vh;
    font-size: 2.86vh;
    color: #767676;
    text-align: center;

    @media screen and (max-width: 1675px) {
        font-size: 2.36vh;
    }
    
    @media screen and (max-width: 1580px) {
        font-size: 1.86vh;
    }

    @media screen and (max-width: 1080px) {
        font-size: 1.36vh;
    }
}

.index .cont .left .name {
    display: table-cell;
    padding-top: 5.21vh;
    font-size: 5.73vh;
    font-weight: 300;
    font-weight: 500;
    text-align: center;
    word-break: keep-all;

    @media screen and (max-width: 1675px) {
        font-size: 4.73vh;
    }

    @media screen and (max-width: 1580px) {
        font-size: 3.73vh;
    }

    @media screen and (max-width: 1080px) {
        font-size: 2.73vh;
    }

}

.index .cont .left .shop_logo {
    display: table-cell;
    padding-top: 7.16vh;
    padding-bottom: 9.11vh;
    
    @media screen and (max-width: 1675px) {
        padding-top: 5.16vh;
        padding-bottom: 7.11vh;
    }

    @media screen and (max-width: 1580px) {
        padding-top: 3.16vh;
        padding-bottom: 5.11vh;
    }

    @media screen and (max-width: 1080px) {
        padding-top: 1.16vh;
        padding-bottom: 3.11vh;
    }
        

}

.index .cont .left .shop_logo .logo {
    width: 32.3vh;
    height: 23.69vh;
    margin: 0 auto;
    line-height: 23.69vh;
    text-align: center;
}

.index .cont .left .shop_logo .logo img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;

    @media screen and (max-width: 1675px) {
        max-width: 80%;
        max-height: 80%;

    }

    @media screen and (max-width: 1580px) {
        max-width: 60%;
        max-height: 60%;
    }

    @media screen and (max-width: 1080px) {
        max-width: 40%;
        max-height: 40%;
    }

}



.index .cont .left .powered_area {
    position: relative;
}

.index .cont .left .powered {
    height: 4.64vh;
    font-size: 2.34vh;
    color: #666666;
    text-align: center;

    @media screen and (max-width: 1675px) {
        font-size: 1.84vh;
    }
    
    @media screen and (max-width: 1580px) {
        font-size: 1.54vh;
    }

    @media screen and (max-width: 1080px) {
        font-size: 1.34vh;
    }
}

.index .cont .left .powered img {
    width: 17.58vh;
    margin-left: 1.95vh;
    vertical-align: middle;

    @media screen and (max-width: 1675px) {
        width: 13.58vh;
        margin-left: 1.95vh;
    }
    
    @media screen and (max-width: 1580px) {
        width: 9.58vh;
        margin-left: 1.95vh;
    }

    @media screen and (max-width: 1080px) {
        width: 7.58vh;
        margin-left: 1.95vh;
    }
}

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1vh;
    width: 50.5vh;
    padding-top: 6.51vh;
    margin: 0 auto;
    text-align: center;
  }
  
  .keypad li {
    display: inline-block;
    margin-right: 3.28vh;
    margin-bottom: 3.65vh;
  }
  
  .keypad li:nth-child(3n) {
    margin-right: 0;
  }
  
  .keypad li:nth-last-child(1),
  .keypad li:nth-last-child(2),
  .keypad li:nth-last-child(3) {
    margin-bottom: 0;
  }
  
  .keypad li .num {
    display: inline-block;
    width: 13.8vh;
    height: 13.8vh;
    border: .16vh #fafafa solid;
    border-radius: 50%;
    font-size: 6.25vh;
    line-height: 13.8vh;
    color: #fafafa;
    text-align: center;
    vertical-align: middle;
  }
  
  @media screen and (max-width: 1675px) {
    .keypad {
      display: block;
      width: 100%;
      text-align: center;
    }
  
    .keypad li {
      display: inline-block;
      margin: 0 1vh 1vh 0;
    }
  
    .keypad li:last-child {
      margin-right: 0;
    }
  
    .keypad li .num {
      width: 10.8vh;
      height: 10.8vh;
      border: .16vh #fafafa solid;
      border-radius: 50%;
      font-size: 4.25vh;
      line-height: 10.8vh;
      color: #fafafa;
      text-align: center;
      vertical-align: middle;
    }
  }
  
  .keypad li:active .num {
    background-color: #333333;
  }
  
  .keypad li .btn_back {
    position: relative;
  }
  
  .keypad li .btn_back::before {
    content: "";
    position: relative;
    display: block;
    width: 13.8vh;
    height: 13.8vh;
    background: url(../img/ico_keypad.png) no-repeat center;
    background-size: 5.47vh 4.56vh;
    
  }

@media screen and (max-width: 1675px) {
    .keypad li .btn_back::before {
        display: inline-block;
        width: 4vh;
        height: 3vh;
        background: url(../img/ico_keypad.png) round 0 0;
    }
}

.keypad li .btn_ok {
    background-color: #00c1de;
    border-bottom-color: transparent;
    border-width: 0;
    box-shadow: 0 3.8vh 5.7vh -1.9vh rgba(0, 0, 0, .2);
    color: #222222;
}

.keypad li .btn_ok:active {
    background-color: #129bb3;
}

<body>
    <div id="wrap" class="index" style="display:block">
        <div class="cont">
            <section class="left">
                <div class="inner">
                    <div class="tbl_row">
                        <p class="day">2019. 6. 10. MON</p>
                    </div>
                    <div class="tbl_row">
                        <h1 class="name">부산서면점</h1>
                    </div>
                    <div class="tbl_row">
                        <div class="shop_logo">
                            <div class="logo">
                                <img src="../img/sample_logo.png" alt=""><!-- 샘플이미지 -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="powered_area">
                    <p class="powered">Powered By <img src="../img/logo02.png" alt="FIT TO BE"></p>
                </div>
            </section>
            <!-- 키패드 -->
            <section class="right">
                <div class="inner">
                    <div class="pw"><!-- input 번호 4자리 입력 후 class="open" 추가 -->
                        <input type="number" class="input_style" style="font-size: 3.14vh;"
                            placeholder="휴대전화 번호 뒷자리 4자리">
                    </div>
                    <ul class="keypad clearfix">
                        <li onClick=""><span class="num">1</span></li>
                        <li onClick=""><span class="num">2</span></li>
                        <li onClick=""><span class="num">3</span></li>
                        <li onClick=""><span class="num">4</span></li>
                        <li onClick=""><span class="num">5</span></li>
                        <li onClick=""><span class="num">6</span></li>
                        <li onClick=""><span class="num">7</span></li>
                        <li onClick=""><span class="num">8</span></li>
                        <li onClick=""><span class="num">9</span></li>
                        <li onClick="">
                            <div class="num btn_back"><span class="blind">back</span></div>
                        </li>
                        <li onClick=""><span class="num">0</span></li>
                        <li onClick=""><span class="num btn_ok">OK</span></li>
                    </ul>
                </div>
            </section>
            <!-- //키패드 -->
        </div>
    </div>
</body>

P.S. You can ignore the media queries. They were not helpful but I decided to leave them there to show you what I've tried.

do **not** delete a closed question and repost it afterward. Solve the actual close reason so it can be reopened. As before, read [ask] and provide your code as a [repro] while paying extra attention to the word **minimal**. What have you tried so far? What is not working as expected (it would help to explain what your boss wants not that he does not want this solution)? What isn't working by using `aspect-ratio`? — tacoshy, May 23 '23 at 06:47
I've tried using media queries to reduce the size responsively, as you can see in my code, but it didn't give me the desired result. What I need is to be able to resize the window without the left and right divs coming close to each other or acting responsively as you would normally expect it to. And please don't be mean, I'm new here and I'm trying my best to follow the rules. Thank you. — user21911024, May 23 '23 at 07:00
I'm sorry that you feel that I'm mean to you. I'm not (at least not on purpose). There are generally strict rules to which you have been guided before. Many regular users such as me do review tasks. As such they know the guidelines and also know duplicate questions. In my case, I had to review your previous question as well. I merely point you toward the guideline while expecting that you actually make the effort in reading them and to edit your question accordingly to meet those guidelines. — tacoshy, May 23 '23 at 07:03
(Closed before I could answer... anyways) here's what I'd suggest: https://jsfiddle.net/RokoCB/9mLde68c/ More info here: https://stackoverflow.com/a/66721382/383904 - I needed the same a long time ago and since I could not find anywhere a proper solution - there it is. Made my own — Roko C. Buljan, May 23 '23 at 07:19

score -1 · Answer 1 · answered May 23 '23 at 06:53

-1

You can fix the size using the "Max-width" and "min width" properties. That way your div wont grow beyond a specified width range. Another good idea can be to set min and max width and make them flex objects inside a single div. and set flex:1.

answered May 23 '23 at 06:53

Harsha

23
6

1

that would not keep the aspect-ratio... Besides that, it is too broad – tacoshy May 23 '23 at 06:59

How to keep divs at fixed size when window is resized while maintaining aspect ratio?

1 Answers1