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

问题描述

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

但是我从来没有遇到过另一个问题，我试图在容器中放置一个图像，不幸的是，所有尝试使用 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>

标签： cssimageresponsive-design

这个片段在问题中给出了一些更改，图像 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>

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

问题描述

解决方案

推荐阅读