如何根据浏览器宽度调整容器高度

Question

如何通过仅更改浏览器宽度将黑色容器的高度从 550 像素的最大高度缩放到例如 400 像素的高度。与黑色容器一起，盒子 div 也应该按比例变小。我希望它不使用媒体查询。我希望它动态更改，以便您可以看到它逐像素调整大小。我不希望它通过达到媒体查询宽度从一个高度跳到另一个高度。

.container-black {
    height: 550px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: solid 8px grey;
}

.box1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70%;
    width: 30%;
    background-color: red;
}

<body>

    <div class="container-black">
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
    </div>
</body>

Answer 1

使用 vw 或视口宽度等动态值。例如，要保留黑色边框，您可以将 box1 设置为 width: 40vw;。这意味着 box1 将在调整大小时使用 40% 的视口大小，而 container-black 将在任何设备上保持 10% 的视口宽度。允许它响应。

The Dynamic Viewport is the viewport sized with dynamic consideration of any UA interfaces. It will automatically adjust itself in response to UA interface elements being shown or not

css-tricks.com

编辑 -- 添加了 2 个 container-blacks 并将它们嵌套在父容器中，并根据 % 定义了它们的高度，以便它们响应地调整大小。

.container-black {
    height: 33%;
    width: 100vw;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: solid 8px grey;
}

.box1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70%;
    width: 40vw;
    background-color: red;
}

.container {
  height: 100vw;
}

<body>
<div class="container">
    <div class="container-black">
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        
    </div>
    <div class="container-black">
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        
    </div>
    <div class="container-black">
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        
    </div>
</div>
</body>

Answer 2

您可以在 height 定义中使用 vw 单位（= 视口宽度的百分比），如有必要，可以在媒体查询中使用

Answer 3

一种方法是在黑框的高度上使用 vw 单位。

1vw 等于视口宽度的 1%。

另一种方法是 CSS 纵横比功能。您可以在下面的 link 中了解更多信息。

https://css-tricks.com/almanac/properties/a/aspect-ratio/

如何根据浏览器宽度调整容器高度

How to resize container height based on browser width

html

css

responsive-design