Adjust the vertical scaling of a container in CSS Grid to maintain aspect ratio similar to an <img>

Question

Adjust the vertical scaling of a container in CSS Grid to maintain aspect ratio similar to an <img>

I am attempting to recreate a demonstration where the house image scales as the viewport height decreases. However, instead of using an <img>, I would like to use a container that also includes absolutely positioned content (unable to provide all the details).

You can view my attempt here: https://jsfiddle.net/syhb7d2L/6/

The main challenge lies in maintaining the aspect ratio (square) of the div.container. Traditional padding-top hacks are not suitable in this scenario, as the container's width needs to adjust as the height changes.

I experimented with using a 1x1 Pixel Image as a placeholder, but encountered issues with scaling within the container.

UPDATE: Following the suggestion in the response 10706764, utilizing the CSS aspect-ratio property would be beneficial for modern browsers. Unfortunately, this solution is only supported in iOS 15 and above, which does not meet our requirements as we need compatibility with iOS 12 and newer versions (widely used).

html css css-grid

Answer 1

Answer №1

If you're looking to maintain a specific aspect ratio for your elements, you can utilize the aspect-ratio css property. This handy feature allows you to set proportions such as 1/1 for a square shape or 16/9 for a panoramic view.

Whether you want to base the ratio on height or width, the aspect-ratio property will work seamlessly across all major browsers without any issues.

You can see an example of how to implement this in your code snippet below:

.container {
  aspect-ratio: 1 / 1;
  background-color: red;
  width: 60%;
}
.container-height {
  aspect-ratio: 1 / 1;
  background-color: blue;
  height: 60vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
</head>
<body>
  <div class="container">
  </div>
  <div class="container-height">
  </div>
</body>
</html>

Answer 2

If you're looking to maintain a specific aspect ratio for your elements, you can utilize the aspect-ratio css property. This handy feature allows you to set proportions such as 1/1 for a square shape or 16/9 for a panoramic view.

Whether you want to base the ratio on height or width, the aspect-ratio property will work seamlessly across all major browsers without any issues.

You can see an example of how to implement this in your code snippet below:

.container {
  aspect-ratio: 1 / 1;
  background-color: red;
  width: 60%;
}
.container-height {
  aspect-ratio: 1 / 1;
  background-color: blue;
  height: 60vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
</head>
<body>
  <div class="container">
  </div>
  <div class="container-height">
  </div>
</body>
</html>

Adjust the vertical scaling of a container in CSS Grid to maintain aspect ratio similar to an <img>

Answer №1

Similar questions

Guide on applying a filter to the items in a listbox using the input from a text box

Methods for Expanding a Div within an Oversized Row, Despite Height Constraints

Tips for locating a specific HTML element within a string

Effortlessly implement CSS styling in a scoped shadow element with Vue3

The page fades in as soon as it is loaded thanks to the "

I am having trouble with my image not resizing properly within the flexbox when using height and max-height properties

Retrieve jQuery CSS styles from a JSON database

Creating a script to open multiple URLs in HTML and JavaScript

Is concealing content using Javascript or jQuery worth exploring?

PHP - Working with Regular Expressions in Improperly Formatted

Organizing grid elements within the popper component

Preserve the timestamp of when the radio query was chosen

Align content distributed evenly will not display a division

Access the freshly launched URL

PHP function that allows toggling only the first item in an accordion

Saving sortable portlet items to a database using JQuery AJAX

Tips for using nested flexbox with images

CSS hover effects are not displayed when using the input type button

Is there a way to ensure that my slideshow images maintain their proportions when viewed on various screen sizes?

How does CSS affect the size and performance of a website?