Always maintaining a responsive and square aspect ratio div

Question

Always maintaining a responsive and square aspect ratio div

I am developing a CSS and JavaScript-based game that requires the game field to be square and adjust its width and height based on the height of the viewport. In case the viewport width is smaller than the height, I need the field size to adapt while maintaining a 1:1 ratio.

Below is my current code:

<div class="field">
    <div class="player">
    </div>
</div>

.field {
    width: 75vh;
    height: 75vh;
    background: #B2EBF2;
    border: 1.25vh solid #0097A7;
}
.field .player {
    width: 5vh;
    height: 5vh;
    background: #727272;
}

JSFiddle demo

The current setup works well when adjusting the window/viewport height, but fails to respond to changes in width. How can I ensure that the div remains responsive and maintains a square shape regardless of changes in the viewport width?

Appreciate any guidance on this matter.

html css responsive-design

Answer 1

Answer №1

Using CSS media queries to determine if the viewport is in portrait or landscape orientation. When in Portrait mode, the width is the smallest dimension to be considered, whereas in Landscape mode, it's the height that is the smallest.

Check out the fiddle

@media only screen and (orientation: portrait) {
    .field {
        width: 75vw;
        height: 75vw;
    }
}

@media only screen and (orientation: landscape) {
    .field {
        width: 75vh;
        height: 75vh;
    }
}

.field {
    background: #B2EBF2;
    border: 1.25vh solid #0097A7;
}

.field .player {
    width: 5vh;
    height: 5vh;
    background: #727272;
}

Answer 2

Using CSS media queries to determine if the viewport is in portrait or landscape orientation. When in Portrait mode, the width is the smallest dimension to be considered, whereas in Landscape mode, it's the height that is the smallest.

Check out the fiddle

@media only screen and (orientation: portrait) {
    .field {
        width: 75vw;
        height: 75vw;
    }
}

@media only screen and (orientation: landscape) {
    .field {
        width: 75vh;
        height: 75vh;
    }
}

.field {
    background: #B2EBF2;
    border: 1.25vh solid #0097A7;
}

.field .player {
    width: 5vh;
    height: 5vh;
    background: #727272;
}

Answer 3

Answer №2

Setting a minimum width and height for the field

.field {
min-width: 75vh;
min-height: 75vh;
max-width: 600px;
max-height: 300px;
background: #B2EBF2;
border: 1.25vh solid #0097A7;
}

.field .player {
width: 5vh;
height: 5vh;
max-width: 600px;
max-height: 300px;
background: #727272;
}

Hoping this resolves the issue at hand.

Answer 4

Setting a minimum width and height for the field

.field {
min-width: 75vh;
min-height: 75vh;
max-width: 600px;
max-height: 300px;
background: #B2EBF2;
border: 1.25vh solid #0097A7;
}

.field .player {
width: 5vh;
height: 5vh;
max-width: 600px;
max-height: 300px;
background: #727272;
}

Hoping this resolves the issue at hand.

Always maintaining a responsive and square aspect ratio div

Answer №1

Answer №2

Similar questions

Is Angular File API Support Compatible with HTML5?

The div in Bootstrap is not becoming scrollable despite using "overflow: auto"

Strange issue with Firefox when utilizing disabled attribute as "disabled"

When utilizing ng-repeat and invoking the function in the HTML, the JSON array values fail to transfer to the HTML form

Elements appear with varying widths in Firefox compared to Webkit-based browsers

Develop an outline using D3.js for the clipath shape

What is the best method to choose the initial offspring of the primary brother or sister within a list item?

Guide on including an arrow to the right of a drop-down list button using CSS

What are the essential Bootstrap CSS and JavaScript files that need to be connected to our HTML document?

Is it possible to incorporate two ng-repeat directives within a single td element in a table?

Implementing Dynamic Script Injection in Angular Controllers for Enhanced HTML Functionality

Text Parallax Effect

I'm having trouble finding a solution to remove the white space

In Firefox, the scaling of svg masks is not functioning properly

Adjust Text to Perfectly Fit Button

"The functionality of the personalized checkbox is not working as expected

HTML5 Video validation is not working properly

Issues with jQuery toggle functionality have been reported specifically on the iPhone8 and other iOS devices

Align the body of the table with the header after populating the table with values

The div inside an iframe is not displaying the desired background color as intended from the parent page