CSS Responsive Hexagon Image Frame [duplicate] - css

Question

This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 6 months ago.
I'm trying to make a responsive hexagon image frame, but I'm stuck on aligning the inner hexagon. Does anyone know how to center the inner hexagon? Here's my code:
.inner {
background-color: red;
width: 95%;
height: 0%;
padding-bottom: 98%;
margin-top: auto;
margin-bottom: auto;
}
.outer {
background-color: mediumspringgreen;
width: 12%;
height: 0%;
padding-bottom: 13%;
}
.hexagon {
display: flex;
justify-content: center;
align-items: center;
position: relative;
-webkit-clip-path: polygon( 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
<div class="hexagon outer">
<div class="hexagon inner">
<img src="https://placekitten.com/400/400" class="absolute inset-0 h-full w-full" alt="" />
</div>
</div>
My result:
Expected result:

Answer 1

It seems as you use the padding only for your inner div, the outer div only gets that height. I would have a container that you put the width on, then you can add padding to your outer hexagon and absolutely position your inner hexagon:
.container {
width: 12%;
}
.inner {
background-color: red;
width: calc(100% - 10px);
/* can change this to be a percentage if you want a variable width border. with calc, the border will always be half of what you subtract */
height: calc(100% - 10px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.outer {
background-color: blue;
width: 100%;
padding-top: 100%;
position: relative;
}
.hexagon {
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
}
.img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="container">
<div class="hexagon outer">
<div class="hexagon inner">
<img src="https://placekitten.com/400/400" class="img">
</div>
</div>
</div>
From comments solution using aspect ratio instead of padding and inset instead of calc on the width of inner:
.container {
width: 12%;
}
.inner {
background-color: red;
/* insets the element 5px from the edges of
the element against which its positioned: */
inset: 5px;
position: absolute;
}
.outer {
/* allows one dimension to be set (here 'inline-size'/'width'),
and the other dimension ('block-size'/'height') will be
an equal width: */
aspect-ratio: 1;
background-color: blue;
/* logical property, equivalent to 'width' in the English -
left-to-right - language: */
inline-size: 100%;
position: relative;
}
.hexagon {
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
}
.img {
width: 100%;
object-fit: cover;
}
<div class="container">
<div class="hexagon outer">
<div class="hexagon inner">
<img src="https://placekitten.com/400/400" class="img">
</div>
</div>
</div>

Answer 2

Try it:
.inner {
background-color: red;
width: 95%;
height: 0%;
padding-bottom: 98%;
margin-top: auto;
margin-bottom: auto;
}
.outer {
background-color: mediumspringgreen;
width: 12%;
height: 0%;
padding-bottom: 13%;
}
.hexagon {
display: flex;
justify-content: center;
align-items: center;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="hexagon outer">
<div class="hexagon inner">
<img src="https://placekitten.com/400/400" class="absolute inset-0 h-full w-full" alt="" />
</div>
</div>