How Can I Set an Element's Width Proportionally to Its Height Using CSS?

Adjusting Element Width by Height Using CSS

Setting element width based on height can be achieved via jQuery, as mentioned in the original question. However, this process can be streamlined using CSS.

To accomplish this, leverage the concept of replaced elements such as . These elements inherently adjust their width to maintain their aspect ratio when only height is specified.

Consider the following example:

.container {
  position: relative;
  display: inline-block;
  height: 50vh;
}

.container > img {
  height: 100%;
}

.contents {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

The .container element's height determines the minimum width. The transparent with a 1:1 aspect ratio ensures that the width of .container and its child .contents element is always proportional to its height.

Alternatively, to maintain a 4:3 aspect ratio for .contents, set the img's height to 133%. Using a or is also feasible.

For situations where element height should be adjusted based on width, refer to the guide on maintaining aspect ratios using CSS.

The above is the detailed content of How Can I Set an Element's Width Proportionally to Its Height Using CSS?. For more information, please follow other related articles on the PHP Chinese website!