Positioning of a Absolute Element in relation to a responsive image - css

Question

I’m trying to create a responsive design where a sections section is always flush to the bottom edge of an image.
The section is a grid divided into three grid-areas:
“section1 section3”
“section2 section3"
I want the bottom of section1 to always align with the bottom of a responsive 3/2 image.
The closest I’ve been able to get to achieve what I’m looking for is by applying padding-bottom: min(50px, 3.5vw);
img{
object-fit: contain;
/* aspect-ratio: 3/2;*/
width: 100%;
padding-bottom: min(50px, 3.5vw);
}
div section{
position: absolute;
bottom: 0;
}
What I’m looking for is something like calc(heightOfTheContainer + XXpx)
I know I can do this in JavaScript document.getElementById("myImg").offsetHeight + XXpx;
Can I achieve what I want with just CSS using calc() minmax() or ??.
main{
height:100%;
width: 100%;
padding: 3.5vh;
}
div{
position: relative;
max-width: 800px;
margin: 0 auto;
}
img{
object-fit: contain;
/* aspect-ratio: 3/2;*/
width: 100%;
padding-bottom: min(50px, 3.5vw);
}
div section{
position: absolute;
display: grid;
grid-template-columns: 30% 70%;
grid-template-rows: 50% 50%;
grid-template-areas:
"section1 section3"
"section2 section3";
bottom: 0;
height:8vw;
width:100%;
}
.section1, .section2, .section3{
width:100%;
height:100%;
font-size: 20px;
font-weight:bold;
color:black;
}
.section1{
grid-area: section1;
background-color: red;
}
.section2{
grid-area: section2;
background-color: blue;
}
.section3{
grid-area: section3;
background-color: green;
opacity: .5;
}
<main>
<div>
<img src="../../images/portfolio/mainbnw.jpg" />
<section>
<div class="section1">
section 1
</div>
<div class="section2">
section 2
</div>
<div class="section3">
section 3
</div>
</section>
</div>
</main>

Answer 1

If you remove any bottom padding from the main and position the grid element relative rather than absolute it will end up immediately below the image.
So then translate it upwards by 50% of its height and the bottom of the first cell will always be aligned with the bottom of the image (whatever height you give the cell).
main {
height: 100%;
width: 100%;
padding: 3.5vh;
}
div {
position: relative;
max-width: 800px;
margin: 0 auto;
}
img {
object-fit: contain;
/* aspect-ratio: 3/2;*/
width: 100%;
}
div section {
position: relative;
transform: translateY(-50%);
display: grid;
grid-template-columns: 30% 70%;
grid-template-rows: 50% 50%;
grid-template-areas: "section1 section3" "section2 section3";
bottom: 0;
height: 8vw;
width: 100%;
}
.section1,
.section2,
.section3 {
width: 100%;
height: 100%;
font-size: 20px;
font-weight: bold;
color: black;
}
.section1 {
grid-area: section1;
background-color: red;
}
.section2 {
grid-area: section2;
background-color: blue;
}
.section3 {
grid-area: section3;
background-color: green;
opacity: .5;
}
<main>
<div>
<img src="https://picsum.photos/id/1015/600/400" />
<section>
<div class="section1">
section 1
</div>
<div class="section2">
section 2
</div>
<div class="section3">
section 3
</div>
</section>
</div>
</main>

Answer 2

If you use grid, you can a set few elements inside the same cell without the need of absolute.
here is an example made of 3 rows to show the idea:
img {
object-fit: contain;
aspect-ratio: 3/2;
}
.section1,
.section2,
.section3 {
font-size: 20px;
font-weight: bold;
color: black;
}
section {
display: grid;
grid-template-columns: 30% 70%;
grid-template-rows: 8fr auto auto;
grid-template-areas: "img img" "sec1 sec3" " sec2 sec3"
}
img {
grid-column: 1/3;
grid-row: 1/3;
width: 100%;
}
.section1 {
grid-area: sec1;
background-color: red;
}
.section2 {
grid-area: sec2;
background-color: blue;
}
.section3 {
grid-area: sec3;
background-color: rgba(0,128,0,0.5);
}
<section>
<img src="https://picsum.photos/id/1015/300/200" />
<div class="section1">
section 1
</div>
<div class="section2">
section 2
</div>
<div class="section3">
section 3
</div>
</section>