当窗口变得小于元素时，是否有一种纯 CSS 方法可以使用“调整大小”缩小元素？答案

【问题标题】：Is there a pure CSS way to make an element using "resize" shrink when the window becomes smaller than the element?当窗口变得小于元素时，是否有一种纯 CSS 方法可以使用“调整大小”缩小元素？
【发布时间】：2021-11-12 14:26:09
【问题描述】：

我正在使用resize: both; 制作可调整大小的框架。我注意到当我缩小屏幕时，框架保持相同大小，触发水平滚动条。我尝试将max-width: 98%; 添加到元素中，它阻止我按预期拖动超过 98%，但它并没有像我希望的那样压扁框架。

这是一个基本的例子

<section class="page">

    <article class="resizeFrame">
        <iframe class="iFrame"></iframe>
    </article>
 
</section>

<style>

    .page{
        display: grid;
        width: 100%;
        height: auto;
    }

    .resizeFrame{
        grid-area: 1/1/2/2;
        display: grid;
        place-self: center;
        autoflow: hidden;
        resize: both;
        box-sizing: border-box;
        border: 2px solid #000;
        width: 600px;
        max-width: 98%;
        height: 400px;
    }

    .iFrame{
        grid-area: 1/1/2/2;
        width: 100%;
        height: 100%;
        border: none;
        overflow: hidden;
    }

</style>

如果你扩大.resizeFrame 的宽度，它会停在 98%。但是，如果您缩小窗口的宽度，resizeFrame 不会随着它保持max-width: 98%; 而缩小。有人知道用纯 CSS 实现这一目标的方法吗？我知道在 Javascript 中有各种各样的方法可以做到这一点，但如果有 css 方式，我宁愿不这样做。

【问题讨论】：

嗨，请分享一个最小的可生产示例 (stackoverflow.com/help/minimal-reproducible-example)
" 它不会像我希望的那样压扁框架" 你希望它如何？

标签： html css

【解决方案1】：

你试过max-width: 98vw;

我已经更新了上面的代码。

body {
  margin: 0;
  padding: 0;
} 
.page{
    display: grid;
    width: 100%;
    height: auto;
    margin: 8px 0;
}

.resizeFrame{
   grid-area: 1/1/2/2;
   display: grid;
   place-self: center;
   overflow: hidden;
   resize: both;
   box-sizing: border-box;
   border: 2px solid #000;
   width: 600px;
   max-width: 98vw;
   height: 400px;
}

.iFrame{
   grid-area: 1/1/2/2;
   width: 100%;
   height: 100%;
   border: none;
   overflow: hidden;
   }

<body>
    
    <section class="page">

        <article class="resizeFrame">
            <iframe class="iFrame"></iframe>
        </article>
     
    </section>
</body>

【讨论】：

实际上这就是我目前在我的代码中设置的内容，但它不起作用。我也在 Storybook 中查看它，让我看看它是否可以在没有 Storybook 的页面上查看。
好的，这在查看故事书之外的页面时确实有效。在假设它的行为与故事书窗口中的行为方式相同之前，我没想过要检查它。

【解决方案2】：

试试这个：

@media only screen and (max-width: 1600px){
    .resizeFrame{
        grid-area: 1/1/2/2;
        display: grid;
        place-self: center;
        autoflow: hidden;
        resize: both;
        box-sizing: border-box;
        border: 2px solid #000;
        width: 600px;
        max-width: 90%;
        height: 400px;
    }
}

@media only screen and (max-width: 1300px){
    .resizeFrame{
        grid-area: 1/1/2/2;
        display: grid;
        place-self: center;
        autoflow: hidden;
        resize: both;
        box-sizing: border-box;
        border: 2px solid #000;
        width: 600px;
        max-width: 90%;
        height: 400px;
    }
}

@media only screen and (max-width: 1000px){
    .resizeFrame{
        grid-area: 1/1/2/2;
        display: grid;
        place-self: center;
        autoflow: hidden;
        resize: both;
        box-sizing: border-box;
        border: 2px solid #000;
        width: 600px;
        max-width: 90%;
        height: 400px;
    }
}

@media only screen and (max-width: 700px){
    .resizeFrame{
        grid-area: 1/1/2/2;
        display: grid;
        place-self: center;
        autoflow: hidden;
        resize: both;
        box-sizing: border-box;
        border: 2px solid #000;
        width: 600px;
        max-width: 90%;
        height: 400px;
    }
}

@media only screen and (max-width: 400px){
    .resizeFrame{
        grid-area: 1/1/2/2;
        display: grid;
        place-self: center;
        autoflow: hidden;
        resize: both;
        box-sizing: border-box;
        border: 2px solid #000;
        width: 600px;
        max-width: 90%;
        height: 400px;
    }
}

@media only screen and (max-width: 100px){
    .resizeFrame{
        grid-area: 1/1/2/2;
        display: grid;
        place-self: center;
        autoflow: hidden;
        resize: both;
        box-sizing: border-box;
        border: 2px solid #000;
        width: 600px;
        max-width: 90%;
        height: 400px;
    }
}

我认为这应该可行。注意：这仍然取决于 PC 大小，但在大多数情况下，它会起作用。

说明：这个 CSS 会每 300px 更新一次大小，并根据它设置 %。

【讨论】：