Responsive Div that Resizes Proportionally within Parent Container

Question

Responsive Div that Resizes Proportionally within Parent Container

Having a div element that adjusts its height based on width to maintain aspect ratio, I aim to place this div within another while maximizing available space vertically and horizontally without any cropping. It seems that object-fit: contain, typically used for images, may be the closest option.

The goal is to ensure the div covers the maximum height and width possible while still adhering to the aspect ratio, with no crop in either vertical or horizontal directions.

Can this be achieved using CSS alone? If so, how?

Want more insight? Check out this informative article.

Code snippet (or any alternate solution):

html,
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.container {
  position: relative;
  width: 100%;
}

.container:before {
  content: "";
  display: block;
  width: 50%;
  padding-top: 50%;
}

.embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}

<div class="container">
  <div class="embed">
    this should accommodate all the available space and maintain aspect ratio, no crop when width is too wide
  </div>
</div>

https://i.stack.imgur.com/rs95z.png

html css css-position aspect-ratio

Answer 1

Answer №1

Learn about aspect-ratio and how it can be used with overflow:hidden in Chromium 88 to create visually pleasing designs.

Update for January 2023:

A new container query @container (aspect-ratio > X) is now required for Firefox version v110.0b2, Safari, and Chromium browsers. Make sure to update your code accordingly.

You can find the updated code snippet below and also view a demo on jsitor by visiting this link.

html,
body {
  display: flex;
  justify-content: center;
  align-items: center;

/* Rest of the CSS code omitted for brevity */
}

<div class="container">
  <div class="embed">
    <div>1:1</div>
  </div>
</div>

Answer 2

Learn about aspect-ratio and how it can be used with overflow:hidden in Chromium 88 to create visually pleasing designs.

Update for January 2023:

A new container query @container (aspect-ratio > X) is now required for Firefox version v110.0b2, Safari, and Chromium browsers. Make sure to update your code accordingly.

You can find the updated code snippet below and also view a demo on jsitor by visiting this link.

html,
body {
  display: flex;
  justify-content: center;
  align-items: center;

/* Rest of the CSS code omitted for brevity */
}

<div class="container">
  <div class="embed">
    <div>1:1</div>
  </div>
</div>

Answer 3

Answer №2

After exploring various options, it appears that a CSS-only solution may not be feasible for this particular challenge. For those who are curious, I have developed a custom React component that addresses the issue (Expect tests and an improved README in the near future).

This component encapsulates its content within a div, utilizing JavaScript to determine the dimensions of the containing element so that it can adjust accordingly while maintaining the desired aspect ratio. Essentially, it adjusts the container size until one side reaches its maximum limit.

LATEST UPDATE: A recent breakthrough has led to the discovery of a potential CSS-based solution!

Answer 4

After exploring various options, it appears that a CSS-only solution may not be feasible for this particular challenge. For those who are curious, I have developed a custom React component that addresses the issue (Expect tests and an improved README in the near future).

This component encapsulates its content within a div, utilizing JavaScript to determine the dimensions of the containing element so that it can adjust accordingly while maintaining the desired aspect ratio. Essentially, it adjusts the container size until one side reaches its maximum limit.

LATEST UPDATE: A recent breakthrough has led to the discovery of a potential CSS-based solution!

Answer 5

Answer №3

One way I found to work around this issue is by enclosing the child element within an svg's foreignObject tag:

const container = document.getElementById('container');
document.getElementById('btn').addEventListener('click', () => {
  container.style.height = container.style.height === '100px' ? '200px' : '100px';
});

body {
  margin: 1rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

button {
  margin-bottom: 1rem;
}


#container {
  background-color: #ffceaf;
  width: 400px;
}

svg {
  background-color: #b8d6ff;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

#content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: solid;
}

<button id="btn">Change parent height</button>

<div id="container" style="height: 100px;">
  <svg width="15000" height="5000">
    <foreignObject width="100%" height="100%">
      <div id="content">
        content content content content content content content
        (...continued)
      </div>
    </foreignObject>
  </svg>
</div>

However, there are some drawbacks to this approach:

Limited browser compatibility (IE/Edge do not fully support foreignObject)
It may not be considered best practice. Introducing elements from a different XML namespace could lead to potential issues(?).

Considering these factors, using JavaScript might be a more reliable option in this scenario.

Answer 6

One way I found to work around this issue is by enclosing the child element within an svg's foreignObject tag:

const container = document.getElementById('container');
document.getElementById('btn').addEventListener('click', () => {
  container.style.height = container.style.height === '100px' ? '200px' : '100px';
});

body {
  margin: 1rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

button {
  margin-bottom: 1rem;
}


#container {
  background-color: #ffceaf;
  width: 400px;
}

svg {
  background-color: #b8d6ff;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

#content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: solid;
}

<button id="btn">Change parent height</button>

<div id="container" style="height: 100px;">
  <svg width="15000" height="5000">
    <foreignObject width="100%" height="100%">
      <div id="content">
        content content content content content content content
        (...continued)
      </div>
    </foreignObject>
  </svg>
</div>

However, there are some drawbacks to this approach:

Limited browser compatibility (IE/Edge do not fully support foreignObject)
It may not be considered best practice. Introducing elements from a different XML namespace could lead to potential issues(?).

Considering these factors, using JavaScript might be a more reliable option in this scenario.

Answer 7

Answer №4

Check out this CSS-only solution I came up with:

View Codepen Demo or you can run the demo below ⬇

.resizable-container {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
  padding: 3px;
  height: 140px;
  width: 330px;
}
.container {
  height: 100%;
  box-sizing: border-box;
}
.aspect-thing {
  aspect-ratio: 16/9;
  border: 2px red solid;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

<div class="resizable-container"> 
  <div class="container">
    <div class="aspect-thing">
    </div>
  </div>
</div> 
<p>You can resize me ^</p>

https://i.stack.imgur.com/7HOQA.gif

Answer 8

Check out this CSS-only solution I came up with:

View Codepen Demo or you can run the demo below ⬇

.resizable-container {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
  padding: 3px;
  height: 140px;
  width: 330px;
}
.container {
  height: 100%;
  box-sizing: border-box;
}
.aspect-thing {
  aspect-ratio: 16/9;
  border: 2px red solid;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

<div class="resizable-container"> 
  <div class="container">
    <div class="aspect-thing">
    </div>
  </div>
</div> 
<p>You can resize me ^</p>

https://i.stack.imgur.com/7HOQA.gif

Answer 9

Answer №5

This solution utilizes pure CSS with nested flexboxes. The outer container has a flex-direction: row property, while the inner container has a flex-direction: column property. It is crucial that the inner container's aspect-ratio is set to 1/1 and the height of the inner container is defined, along with the width of the pseudo-element inner:before.

<div class="outer">
  <div class="inner"></div>
</div>

.outer {
  width: 80%;
  height: 80%;
  margin: auto;
  background-color: red;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  height: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.inner:before {
  content: '';
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: blue;
}

Answer 10

This solution utilizes pure CSS with nested flexboxes. The outer container has a flex-direction: row property, while the inner container has a flex-direction: column property. It is crucial that the inner container's aspect-ratio is set to 1/1 and the height of the inner container is defined, along with the width of the pseudo-element inner:before.

<div class="outer">
  <div class="inner"></div>
</div>

.outer {
  width: 80%;
  height: 80%;
  margin: auto;
  background-color: red;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  height: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.inner:before {
  content: '';
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: blue;
}

Answer 11

Answer №6

Take a look at this refined version of the solution inspired by Ben Winding, which effectively centers the div vertically:

Codepen Link or try out the demo below ⬇

:root {
  --aspect-ratio: 16/9;
  --container-max-width: 90%;
}

.resizable-container {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
  padding: 3px;
  height: 140px;
  width: 330px;
}

.container {
  height: 100%;
  box-sizing: border-box;
  width: 100%; 
  max-width: var(--container-max-width);
  margin: auto; 
  display: flex;
}

.inner-container {
  flex-grow: 1; 
  align-self: center;
  max-width: 100%;
  max-height: 100%; 
  aspect-ratio: var(--aspect-ratio);
}

.aspect-thing {
  aspect-ratio: var(--aspect-ratio);
  border: 2px red solid;
  box-sizing: border-box;
  
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

<div class="resizable-container"> 
  <div class="container">
    <div class="inner-container">
      <div class="aspect-thing">
      </div>
    </div>
  </div>
</div> 
<p>Resize me ^</p>

Answer 12

Take a look at this refined version of the solution inspired by Ben Winding, which effectively centers the div vertically:

Codepen Link or try out the demo below ⬇

:root {
  --aspect-ratio: 16/9;
  --container-max-width: 90%;
}

.resizable-container {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
  padding: 3px;
  height: 140px;
  width: 330px;
}

.container {
  height: 100%;
  box-sizing: border-box;
  width: 100%; 
  max-width: var(--container-max-width);
  margin: auto; 
  display: flex;
}

.inner-container {
  flex-grow: 1; 
  align-self: center;
  max-width: 100%;
  max-height: 100%; 
  aspect-ratio: var(--aspect-ratio);
}

.aspect-thing {
  aspect-ratio: var(--aspect-ratio);
  border: 2px red solid;
  box-sizing: border-box;
  
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

<div class="resizable-container"> 
  <div class="container">
    <div class="inner-container">
      <div class="aspect-thing">
      </div>
    </div>
  </div>
</div> 
<p>Resize me ^</p>

Responsive Div that Resizes Proportionally within Parent Container

Answer №1

Update for January 2023:

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Can you navigate to HTML files using Vue router?

What is the best way to iterate over my JSON data using JavaScript in order to dynamically generate cards on my HTML page?

Experiencing a hiccup in your jQuery animation?

How do I easily show/hide a submenu in AngularJS with a toggle menu?

Can CSS3 be utilized to craft this specific shape?

Vertical centering of inline-block elements remains unaffected by line-height changes

Tips for connecting a Vuetify v-menu to its parent element within a list that can be scrolled

Having Trouble with Your Instafeed Script

Is there a way to showcase a block of Python code using a combination of HTML, CSS, and Javascript to enhance its

Retrieve the most recent 5 entries from a database using PHP and display them in an ordered list on an HTML page

Creating Sleek Tables - comparing the benefits of using table-layout:fixed versus setting individual td-width to

Showing the name of a class

Can floating elements be disregarded by block elements?

Unused sizing attributes in IMG tags

CSS - fixed table headers

The navigation bar is failing to display all of the titles

What is the best way to allocate a unique color to every item within an array?

Customizing Your JQuery.awesomeCloud.plugin with a Tooltip Functionality using jQuery

What is the best way to insert a row into a JavaScript table while incorporating a cell that utilizes the datepicker function in jQuery?

Separate sentence to one word per line