css width same as height
This is my way
aspect-ratio: 1 / 1;
height: 100%;
Example:
.my-container {
width: 100%;
height: 150px;
background: black;
padding: 20px
}
.my-element {
background: #fff;
aspect-ratio: 1 / 1;
height: 100%;
}
<div class="my-container">
<div class="my-element">Height = Width</div>
</div>
Another options is to make aspect ratio using img element behavior
Here i use svg image and inline it with data url to make it simpler
To describe desired aspect ratio you can use viewBox svg attribute viewBox='0 0 width-ratio height-ratio'
Examples:
html,
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
margin: 0;
padding: 0;
}
body {
margin: 1rem;
}
.row {
padding: 8px 0px;
}
.block {
display: inline-block;
vertical-align: top;
position: relative;
margin-left: 8px;
margin-right: 8px;
}
.block-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.ratio--width-to-height {
height: 100%;
width: auto;
}
.ratio--height-to-width {
height: auto;
width: 100%;
}
<h1>
Block aspect ratio with svg image
</h1>
<h2>
width to height
</h2>
<div class="row">
<div class="block" style="background: lime; height: 120px;">
<img class="ratio--width-to-height"
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'></svg>">
<div class="block-content">1 : 1</div>
</div>
<div class="block" style="background: cyan; height: 120px;">
<img class="ratio--width-to-height"
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1'></svg>">
<div class="block-content">2 : 1</div>
</div>
<div class="block" style="background: orange; height: 120px;">
<img class="ratio--width-to-height"
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1.25'></svg>">
<div class="block-content">1 : 1.25</div>
</div>
</div>
<h2>
height to width
</h2>
<div class="row">
<div class="block" style="background: lime; width: 120px;">
<img class="ratio--height-to-width"
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'></svg>">
<div class="block-content">1 : 1</div>
</div>
<div class="block" style="background: cyan; width: 120px;">
<img class="ratio--height-to-width"
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1'></svg>">
<div class="block-content">2 : 1</div>
</div>
<div class="block" style="background: orange; width: 120px;">
<img class="ratio--height-to-width"
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1.25'></svg>">
<div class="block-content">1 : 1.25</div>
</div>
</div>
Same example on codepen https://codepen.io/forceuser/pen/MMWBBx
The only CSS way of doing this at the moment (AFAIK) is using viewport relates values (vh / vw )
Support is not great at the moment: http://caniuse.com/viewport-units but here is a quick demo
JSFiddle
CSS
.box {
background-color: #00f;
width: 50vw;
height:50vw;
}
The box is responsive but will always remain square.
Pure % values will not work as height:100%
does not equal width:100%
as they refer to different things being the relevant dimensions of the parent.