Fill flexible container with centered square component - html

Question

What I try to achieve is shown on following pictures:
Outer rectangle is a div container that can have any size and ratio (it gets resized with browser window resizing), and inside is a component (filled on pictures) that should maintain a 1:1 ratio (square), and should be centered in the container. So its sides are described with the formula min(container_width, container_height).
Any ideas on how to do this?

Answer 1

This can be achieved with a combination of three things:
Flexbox
CSS variables
The calc() function
Flexbox can be used to ensure that the inner element is both horizontally and vertically centered. This is achieved with only three different rules on the container:
display: flex;
align-items: center;
justify-content: center;
The key to making the inner element stay square while the parent has a variable width is to base both thew width and height of the child off of the height of the parent.
In the following, I'm basing both the width and height of the inner square off of the height of the parent container (divided by four). Considering the height and width of the child is defined by the same --value as the height of the parent, it will always remain square and proportionate:
:root {
--value: 200px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid black;
height: var(--value);
}
.box {
background: black;
height: calc(var(--value) / 4);
width: calc(var(--value) / 4);
}
<div class="container">
<div class="box">
</div>
</div>
Note that this will also work if you base your CSS variable off of the viewport height with the vh unit:
:root {
--value: 50vh;
}
.container {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid black;
height: var(--value);
}
.box {
background: black;
height: calc(var(--value) / 4);
width: calc(var(--value) / 4);
}
<div class="container">
<div class="box">
</div>
</div>
Hope this helps! :)

Answer 2

I think you can achieve your goal with the following code. You will need to set your image as the background of the inner div instead of using a <img> directly.
.wrapper {
width: 100%;
height: 300px;
padding: 10px;
box-sizing: border-box;
border: 1px solid red;
}
.inner {
background: url('http://lorempixel.com/output/abstract-q-c-300-300-7.jpg') no-repeat center center;
background-size: contain;
width: 100%;
height: 100%;
}
<div class="wrapper">
<div class="inner"></div>
</div>
Solution 2: using <img> and set the position to absolute.
.wrapper {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 300px;
border: 1px solid red;
box-sizing: border-box;
}
.wrapper img {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%;
}
<div class='wrapper'>
<img src='http://lorempixel.com/output/abstract-q-c-300-300-7.jpg'>
</div>

Answer 3

You can do it like this:
html, body {width:100%;margin:0}
.container {
position: relative;
height: 300px; /* needs to be at least the height of the image */
max-height: 100vh; /* enables vertical responsiveness */
border: 1px solid Skyblue;
}
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* perfectly centered inside the container */
display: block; /* removes bottom margin/white-space */
max-width: 100%; /* horizontal responsiveness */
max-height: 100vh; /* vertical responsiveness */
}
<div class="container">
<img src="http://lorempixel.com/300/300" alt="">
</div>

Answer 4

If the square is an image in this case you can do something like this :
.container {
position:relative;
text-align: center;
border: 1px solid;
background:#f2f2f5;
}
img {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
max-height: 100%;
max-width: 100%;
}
<div class="container" style="width:400px;height:100px;">
<img src="https://lorempixel.com/400/400/" />
</div>
<div class="container" style="width:200px;height:400px;">
<img src="https://lorempixel.com/400/400/" />
</div>
<div class="container" style="width:400px;height:400px;">
<img src="https://lorempixel.com/400/400/" />
</div>
<div class="container" style="width:50px;height:600px;">
<img src="https://lorempixel.com/400/400/" />
</div>
<div class="container" style="width:600px;height:50px;">
<img src="https://lorempixel.com/400/400/" />
</div>
You need to pay attention when using 100% with height as this will depend on the parent of the container and if nothing specified the height will be 0 and thus the image too :
.container {
position: relative;
text-align: center;
border: 1px solid;
background: #f2f2f5;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 100%;
max-width: 100%;
}
<!-- this one will not show -->
<div class="container" style="height:100%;">
<img src="https://lorempixel.com/400/400/" />
</div>
<div style="height:200px">
<!-- this one will show -->
<div class="container" style="height:100%;">
<img src="https://lorempixel.com/400/400/" />
</div>
</div>
if you want to use a div instead of image you can consider the image inside the div and use fit-content value for the width/height and the trick is to make the image not visible and add another div for text content (or anything else).
Pay attention as fit-content is not a standard so not supported by all browser. So you can consider this solution as a pseudo-solution than a generic one
.container {
position: relative;
text-align: center;
border: 1px solid;
background: #f2f2f5;
}
.content {
display: block;
background: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 100%;
max-width: 100%;
height: fit-content;
width: fit-content;
}
.content img {
visibility: hidden;
z-index: -999;
position: relative;
max-height: 100%;
max-width: 100%;
}
.text {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
<div class="container" style="width:400px;height:100px;">
<div class="content">
<img src="https://lorempixel.com/400/400/" />
<div class="text"> lorem ipsum lorem ipsum </div>
</div>
</div>
<div class="container" style="width:200px;height:400px;">
<div class="content">
<img src="https://lorempixel.com/400/400/" />
<div class="text"> lorem ipsum lorem ipsum </div>
</div>
</div>
<div class="container" style="width:400px;height:400px;">
<div class="content">
<img src="https://lorempixel.com/400/400/" />
<div class="text"> lorem ipsum lorem ipsum </div>
</div>
</div>
<div class="container" style="width:50px;height:600px;">
<div class="content">
<img src="https://lorempixel.com/400/400/" />
<div class="text"> lorem ipsum lorem ipsum </div>
</div>
</div>
<div class="container" style="width:600px;height:50px;">
<div class="content">
<img src="https://lorempixel.com/400/400/" />
<div class="text"> lorem ipsum lorem ipsum </div>
</div>
</div>