How to resize container height based on browser width-CodePudding

How can I scale the black containers height from max-height of 550px to for example height of 400px by just changing browsers width. And together with the black container the box divs also should get smaller proportionally. I want it without the use of media queries.. I want it to change dynamically so you can see it resizing pixel by pixel. I don't want it to just jump from one height to another by reaching a media queries width.

.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 >
        <div >
            <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 >
            <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>

CodePudding user response：

Use dynamic values such as vw or viewport width. For example, to keep your black borders you can set box1 to width: 40vw;. This means box1 will use 40% of the viewport size when resizing, and the container-black will maintain 10% of viewport width on any device. Allowing it to be responsive.

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

EDIT -- added 2 more container-blacks and nested them in parent container and defined their height based of % so that they resize responsively.

.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 >
    <div >
        <div >
            <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 >
            <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 >
        <div >
            <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 >
            <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 >
        <div >
            <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 >
            <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>

CodePudding user response：

You can use the vw unit (= percent of viewport width) in your height definition, if necessary, inside a media query

CodePudding user response：

One way to do it is using vw unit on the height of the black box.

1vw equals 1% of the viewport's width.

Another way is the CSS aspect-ratio feature. You can learn more in the link below.

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