How to automatically resize the elements inside a div box while maintaining its original view

Question

I'm building an E-Resume. My problem is: at @media screen and (max-width: 734px) {}, I want the resume to fill the whole screen's width while maintaining the aspect ratio. That means the height, including the contents, will auto size correspondingly. Below is my code for the height and width of the resume, leaving the problem to the contents of the resume:

 @media screen and (max-width: 734px) {
    .resume__container {
        width: 100vw;
        height: calc(100vw * var(--ratio));
    }
 }

So here is a sample view at that media query, as you can see, the size of the resume has already been set the way I wanted. It's just the contents I wanted to solve but lack the knowledge to do so. enter image description here

My inspiration for this is the Word where on mobile view, the document covers the width of the device.

Code Spirit · Answer

Easiest way to implement aspect ratio is to use padding on the parent container and position the child absolute in it.

.parent {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; //16:9
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

How to automatically resize the elements inside a div box while maintaining its original view

1 Answers