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

Enhancing your Vue web application with Bootstrap: A guide to customization

Completing a third-party htaccess file

Different CSS values can be applied for specific versions of Internet Explorer by using conditional comments

How can I convert a background image source into a fluid list item with a display property of inline-block?

Issue with closing collapsed menu on click in Bootstrap version 3

Using jQuery to append content with a variable as the source

Eliminate the navigation bar background using MaterializeCSS

Having trouble with jQuery and Ajax POST requests

What is the best way to horizontally align an image beneath a navigation menu that is built using <ul> tags?

Tips for creating text that wraps around an image in an editor

What is the best way to preserve code in a blog post without any alterations to the code itself?

The Best Practices section of the Chrome lighthouse report has identified an issue with properly defining the charset

Utilizing a single controller in multiple locations within AngularJS

Creating a Bootstrap 4 table that utilizes the full width while maintaining responsiveness

Dynamic value for textbox using Selenium

Navigating the battleground between native and HTML5 mobile applications

Aligning forms horizontally using Bootstrap

Insert content into a designated DIV

Adding the !important rule in React inline CSS effortlessly

How can I select a specific value within an Autocomplete bar by clicking on it in the div ul li strong