how to keep the size of a element fixed when resizing the window

Question

I am creating a reaction time game based on f1 theme , the issue I am facing is that when I resize the window my signal lights also gets resized to oval I want to keep then steady and don't want it to resize you can find the relevant image below :-

after resizing-

how can this be further solved?

Can you give us a minimal working version of your code? Either as a Code Snippet using the editor with something like [JSFiddle](https://jsfiddle.net/) -- Seeing only images from your problem will be a guessing game. — Alex Berger, Oct 27 '22 at 07:01
If you want to add details, please don't post a comment, edit your post instead. — Cédric, Oct 27 '22 at 07:12
yes i thought of doing this but i am getting an error in editing so i posted a comment — U-33, Oct 27 '22 at 07:18

score 0 · Answer 1 · answered Oct 27 '22 at 07:11

0

You will find how to do that here at this qustion: How to resize an image to fit in the browser window? How to resize an image to fit in the browser window?

answered Oct 27 '22 at 07:11

Winston

38
6

score 0 · Answer 2 · answered Oct 27 '22 at 07:20

It looked like your .main-f1 class was the container for the lights?

If so, you can set the width and height to the window height/width to keep the aspect ratio by using calc.

What I wrote below will give an aspect ratio of 2:1.

You will run into other problems if you try to make the window very narrow, so some additional code would be needed to keep the div from being larger than the window. I would probably incorporate a max-width, max-height as well. Hopefully this gets you moving in the right direction, though.

.main-f1{
    height: 70vh;
    width: calc(70vh * 2);
    border: 2px solid red;
    display: flex;
    flex-direction: row;
  
}

K i · Answer 3 · 2022-10-28T08:37:47.303

the reason for that is that .main-f1 is being flexed by the container you can solve this by settings flex-grow and flex-shrink to 0 in CSS as well as setting a static height for it.

here's an example:

Edit: The width was also set to percentages so it was distorting, fixed it by setting it to static width

/* *{
    margin: 0;
    padding: 0;

} */
html,body{
    height: 100%;
    width: 100%;
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    

}
.container{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main-f1{
    flex-grow: 0;
    flex-shrink: 0;
    height: 200px;
    width: 377px;
    border: 2px solid red;
    display: flex;
    flex-direction: row;
  
}
.bar{
    border: 2px solid black;
    z-index: -1;
    
}
.signal{
    width: 100%;
    height: 100%;
    border: 2px solid blue;
    display: flex;
    flex-direction: column;
    margin: auto 7px;
    
}
.btn{
    margin: 7px auto;
    width: 70%;
    height: 100%;
    border-radius: 50%;;
}

<div class="container">
        <div class="main-f1">
            <div class="bar">

            </div>
            <div class="signal f1-signal1">
                <button class="btn btn1"></button>
                <button class="btn btn1"></button>
                <button class="btn btn1"></button>
                <button class="btn btn1"></button>
            </div>
            <div class="signal f1-signal2">
                <button class="btn btn1"></button>
                <button class="btn btn1"></button>
                <button class="btn btn1"></button>
                <button class="btn btn1"></button>
            </div>
            <div class="signal f1-signal3">
                <button class="btn btn2"></button>
                <button class="btn btn2"></button>
                <button class="btn btn2"></button>
                <button class="btn btn2"></button>
            </div>
            <div class="signal f1-signal4">
                <button class="btn btn3"></button>
                <button class="btn btn3"></button>
                <button class="btn btn3"></button>
                <button class="btn btn3"></button>
            </div>
            <div class="signal f1-signal5">
                <button class="btn btn4"></button>
                <button class="btn btn4"></button>
                <button class="btn btn4"></button>
                <button class="btn btn4"></button>
            </div>
        </div>
      </div>

your solution doesn't work. Open it in full page and you see it all distorted. — Osterello, Oct 27 '22 at 18:12

score 0 · Accepted Answer · answered Oct 27 '22 at 07:29

You could use aspect-ratio to keep the same propoprions on resize. Not supported by IE.

/* *{
    margin: 0;
    padding: 0;

} */
html,body{
    height: 100%;
    width: 100%;
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    

}
.container{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.main-f1{
    width: 60%;
    aspect-ratio: 1.8 / 1;
    border: 2px solid red;
    display: flex;
    flex-direction: row;
  
}
.bar{
    border: 2px solid black;
    z-index: -1;
    
}
.signal{
    width: 100%;

    border: 2px solid blue;
    display: flex;
    flex-direction: column;
    margin: auto 7px;
  aspect-ratio: 1 / 0.7;
    
}
.btn{
    margin: 7px auto;
    width: 70%;
    height: 100%;
    border-radius: 50%;;
}

    <div class="container">
        <div class="main-f1">
            <div class="bar">

            </div>
            <div class="signal f1-signal1">
                <button class="btn btn1"></button>
                <button class="btn btn1"></button>
                <button class="btn btn1"></button>
                <button class="btn btn1"></button>
            </div>
            <div class="signal f1-signal2">
                <button class="btn btn1"></button>
                <button class="btn btn1"></button>
                <button class="btn btn1"></button>
                <button class="btn btn1"></button>
            </div>
            <div class="signal f1-signal3">
                <button class="btn btn2"></button>
                <button class="btn btn2"></button>
                <button class="btn btn2"></button>
                <button class="btn btn2"></button>
            </div>
            <div class="signal f1-signal4">
                <button class="btn btn3"></button>
                <button class="btn btn3"></button>
                <button class="btn btn3"></button>
                <button class="btn btn3"></button>
            </div>
            <div class="signal f1-signal5">
                <button class="btn btn4"></button>
                <button class="btn btn4"></button>
                <button class="btn btn4"></button>
                <button class="btn btn4"></button>
            </div>
        </div>
            <div class="content">
                <div class="start">
                    <p>CLick any where to start.Click again when all lights goes off to see your reaction time.
                    </p>
                </div>
                <div class="reaction">
                    <p class="react-text">Your reaction time is 0.000 ms</p>
                </div>
            </div>
        

    </div>
    <footer class="bottom">User-33 - 2022 ©</footer>
</div>

why did you gave aspect ratio to signal class other than main-f1? — U-33, Oct 27 '22 at 19:45
@U-33 because you set all the size in percentage, so I had to force the ratio to all the elements — Osterello, Oct 28 '22 at 19:04

how to keep the size of a element fixed when resizing the window

4 Answers4