将图像放置在填充容器宽度的 CSS 响应式计算容器中

Question

昨天有人向我提供了一个关于如何维护一个永远不会溢出其视口的响应框的答案。

CSS responsive box that maintains aspect ratio but NEVER overflows the viewport

但是我从来没有遇到过另一个问题，我试图在容器中放置一个图像，不幸的是，所有尝试使用 object-fit:、width: & max- 的变体来调整图像大小以适应动态容器宽度：，不工作。

有人可以帮助我如何放置包含在响应式容器中并占据 100% 宽度的图像。提前致谢 - CES

    :root{
    --varWidth: 80vw;
    --varHeight: calc(80vh + 3.5vh);
    }
    
    .aspectRatio3x2 {
        --varAspectRatio: calc( 3 / 2);
        --varCalcHeight: min(calc(var(--varWidth) / var(--varAspectRatio)), var(--varHeight));

        height: var(--varCalcHeight);
        width: calc(var(--varCalcHeight) * var(--varAspectRatio));
        background-color: gold;

    }
    
    .imgMain, .imgOther {
        object-fit: contain;
        width:100%;
        max-width:100%;

        border: 2px solid hsla(0, 0%, 100%, .15);
    }

    .imgMain{
        border-bottom: none;
    }

    
    /* Other CSS */
    .contentContainer {
        width: 100%;
        height: auto;
        padding: min(4vh, 3.5vw);
        background: hsl(0 0% 10%);
        background:red;
    }

    .pageDefault {
        width:100%;
        background-color: black;
    }

    .pageDefault article {
        position: relative;
        margin: 0 auto;

        background: lime;
    }

<div class="contentContainer">
        <main id="idMainContent" class="pageDefault">
            <article class="aspectRatio3x2">
                <figure class="">
                    <picture class="">
                        <img class="imgMain" src="../../images/3x2.jpg" />
                    </picture>
                    <figcaption></figcaption>
                </figure>-->
            </article>
        </main>
    </div>

Answer 1

这个 sn-p 与问题中给出的一样，有几个改动，图像 src 已设置，比例从原始问题中的 3 / 2 更改为 16 / 9，即图像的纵横比图片在评论中给出。

注意：图像可以在视口下方流动，因为自原始问题以来添加了一些填充/条 - 计算需要考虑这些尺寸以确保图像永远不会变得太大。

:root {
  --varWidth: 80vw;
  --varHeight: calc(80vh + 3.5vh);
}

.aspectRatio3x2 {
  --varAspectRatio: calc( 16 / 9);
  --varCalcHeight: min(calc(var(--varWidth) / var(--varAspectRatio)), var(--varHeight));
  height: var(--varCalcHeight);
  width: calc(var(--varCalcHeight) * var(--varAspectRatio));
  background-color: gold;
}

.imgMain,
.imgOther {
  object-fit: contain;
  width: 100%;
  max-width: 100%;
  border: 2px solid hsla(0, 0%, 100%, .15);
}

.imgMain {
  border-bottom: none;
}


/* Other CSS */

.contentContainer {
  width: 100%;
  height: auto;
  padding: min(4vh, 3.5vw);
  background: hsl(0 0% 10%);
  background: red;
}

.pageDefault {
  width: 100%;
  background-color: black;
}

.pageDefault article {
  position: relative;
  margin: 0 auto;
  background: lime;
}

<div class="contentContainer">
  <main id="idMainContent" class="pageDefault">
    <article class="aspectRatio3x2">
      <figure class="">
        <picture class="">
          <img class="imgMain" src="https://i.stack.imgur.com/DT0i7.jpg" />
        </picture>
        <figcaption></figcaption>
      </figure>-->
    </article>
  </main>
</div>