Question 304023 in Html Question posted in
Some basic documentation can be found here.

Html – How to make the children resize along the parent div while maintaining ratio?

How can I make the child elements resize along the parent elements fluidly while maintaining ratio?

As you can see on the attached video file aspect-ratio: 1/0 works but when you hover the HTML element, it becomes smaller than the rest of the elements. I want my Hero component to stay within the HTML element with the same effect .How can I fix this?

Video: (The sudden change of the carousel you see is when I changed width: 1250px to max-width: 1250px)
https://drive.google.com/file/d/14l7UzzRDMfd9AVykaF5gvza68HLycfSH/view?usp=sharing

Hero.js (main)

<div className="Hero" id="Hero">
    <Accordion />
    <div className="border"></div>
    <Carousel />
</div>

Hero.css

.Hero {
    width: 1250px;
    padding-left: 2rem;
    padding-right: 3rem;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    
}

.Hero .border {
    width: 1px;
    background-color: #b3b3b3;
    margin-left: 1rem;
    margin-right: 2rem;
}

/* Responsiveness */
@media only screen and (max-width: 1250px) {
    .Hero {
        aspect-ratio: 1/0;
    }
}

I tried changing width: 1250px to max-width: 1250px and the Hero component stays inside the HTML element. However, resizing it even more smaller makes the Carousel resize instead of the entire Hero component.

Tags:

2

Answers


  1. 0

    you can use a combination of flex-grow and flex-shrink properties to control the behavior of the child elements within the flex container.

    you can try:

    .Hero {
    max-width: 1250px;
    padding-left: 2rem;
    padding-right: 3rem;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.Hero > * {
    flex: 1 1 auto; /* Equal flex grow, shrink, and basis */
    max-width: 100%; /* Occupy maximum width within the container */
    aspect-ratio: 1/1; /* Maintain aspect ratio for child elements */
}

.Hero .border {
    width: 1px;
    background-color: #b3b3b3;
    margin-left: 1rem;
    margin-right: 2rem;
}
    Login or Signup to reply.
  2. 0 
      /* Hero.js */



<div className="Hero" id="Hero">
        <div className="wrapper">
            <Accordion />
        </div>
        <div className="wrapper">
            <div className="border"></div>
        </div>
        <div className="wrapper">
            <Carousel />
        </div>
    </div>



/* Hero.css */

.Hero {
    max-width: 1250px;
    padding-left: 2rem;
    padding-right: 3rem;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.wrapper {
    flex: 1 1 auto;
    max-width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: stretch;
}

.wrapper > * {
    flex: 1;
    width: 100%;
    height: 100%;
}

.Hero .border {
    width: 1px;
    background-color: #b3b3b3;
    margin-left: 1rem;
    margin-right: 2rem;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search