相对于响应式图像定位绝对元素

Question

我正在尝试创建一个响应式设计，其中部分部分始终与图像的底部边缘齐平。 该部分是一个网格，分为三个网格区域：

“第 1 节第 3 节”

“第 2 节第 3 节”

我希望 section1 的底部始终与响应式 3/2 图像的底部对齐。

我最接近的方法是应用 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;
}

我正在寻找类似 calc(heightOfTheContainer + XXpx) 我知道我可以在 JavaScript document.getElementById("myImg").offsetHeight + XXpx; 中做到这一点；

我可以使用 calc() minmax() 或 ?? 仅通过 CSS 实现我想要的。

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

如果您从主元素中删除任何底部填充并将网格元素定位为相对而不是绝对，它将立即位于图像下方。

然后将其向上平移 50% 的高度，第一个单元格的底部将始终与图像的底部对齐（无论您为单元格指定的高度如何）。

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

如果你使用网格，你可以在同一个单元格内设置几个元素，而不需要绝对。

这是一个由 3 行组成的示例来展示这个想法：

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>