Use CSS To Resize Elements?

Question

You can resize an element's width by its parent's width, but can you resize an element's width by its parent's height? (Without using viewport variables)

CSS: "width=90% of parent's height" ??

Width:90%;

The application for this is to keep an aspect ratio in an adaptive layout by setting both the width and the height of the element relative to only the height of the parent element, not the width. I'm trying for a solution that doesn't use viewport variables like 'vw' or 'vh' because of the spotty browser support.

Open to jquery, but would like to avoid if at all possible...

Guille · Accepted Answer · 2015-12-21 03:26:08Z

1

You make your body or html tags 100% height and width and that will work exactly like vh and vw for the whole document. The parent has to have some predefined values of height and width so that children can take the form you want them to have.

Example.

body {
  display: flex;
  justify-content: center;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent {

  width: 500px;
  height: 500px;
  border: 1px solid black
}
.child1 {

  width: 75%;
  height: 75%;
  border: 1px solid blue;

}

.child2{
  width: 50%;
  height: 50%;
  border: 1px solid red;

}

span{
  display: flex;
  align-self: baseline;
  position: absolute;
}

    <div class="parent">
      <span>parent</span>
      <div class="child1">
        <span>child1</span>
        <div class="child2">
          <span>child2</span>
        </div>
      </div>
    </div>

edited Dec 21, 2015 at 3:26

answered Dec 21, 2015 at 2:57

Guille

6521 gold badge5 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Brad Over a year ago

I'm not trying to size the whole document to the viewport. I want to size both the height and width of an element to only either the height or width of the parent. Here's an example using viewport: width: 95vh; height: 95vh;

Brad Over a year ago

This maintains an aspect ratio by getting both the height and width from the viewport height. I want to accomplish this without using viewport.

Guille Over a year ago

can you provide some code to figure this out.. but if you are taking about some element inside a parent container. then you can just use % for that.

Brad Over a year ago

If you do " width: 90%; " it takes the percentage from the width of the parent element. How would make it take the percentage from the height of the parent element?

Guille Over a year ago

Added an example for you to see

|

Collectives™ on Stack Overflow

Use CSS To Resize Elements?

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related