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

Question

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

但是我从来没有运行遇到过其他问题，我试图将图像放入容器中，但不幸的是，所有尝试都试图使用 object-fit 的变体来调整图像大小以适应动态容器： , width: & max-width:, 不起作用。

有人可以帮助我如何放置包含在响应容器中并占据响应容器宽度 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

此片段与问题中给出的有一些改动，图像 src 已设置，比例从原始问题中的 3 / 2 更改为 16 / 9，这是图片在评论中给出。

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

: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>

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

Placing an Image within a CSS responsive calc container that fills the width of the container

css

image

responsive-design