Give the image accurate HTML width and height attributes, then use CSS to make its displayed width responsive and its height automatic. The dimensions supply an early aspect ratio without locking the image to that display size. MDN: Multimedia images

This guide is for someone editing an HTML page on a Mac who wants an image to resize with its container while reserving proportional space before it loads. The example uses a self-contained abstract graphic, so you can try the sizing behavior without downloading an asset.

How can dimensions reserve space without fixing the display size?

An image has resource dimensions, such as 1200 by 800, and a displayed size determined by layout. Those numbers can differ. HTML dimension attributes provide sizing hints; your stylesheet can override the displayed width and height. The HTML Standard also maps the attributes to a preferred aspect ratio in the form auto 1200 / 800. HTML Standard: attributes for embedded content and images

For a 1200-by-800 resource, the ratio is 3:2. Once layout establishes a displayed width, the browser can calculate a proportional height before the resource finishes loading. MDN recommends supplying both dimensions alongside responsive CSS to reduce image-related layout shifts. MDN: Multimedia images

The practical division of responsibility is straightforward: HTML describes the resource’s dimensions, and CSS describes how it fits the page. Keep those descriptions consistent. Supplying dimensions is useful even when the image will never appear at its original size.

Choose whether the image should fill its container

Use the following CSS fragment when the image should fill the available container width. It assumes the image has a class of responsive-image and accurate dimension attributes:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
}

If the image should shrink when necessary but retain its declared width when there is more room, use this alternative fragment:

.responsive-image {
  display: block;
  max-width: 100%;
  height: auto;
}

The second pattern is MDN’s documented approach to keeping an image within a narrower container. In this simple layout, width: 100% fills the container, whereas max-width: 100% sets an upper limit. Keep height: auto in either pattern so the height can follow the ratio rather than remaining at the HTML height. MDN: Multimedia images

Try a complete responsive-image page on your Mac

Open TextEdit, choose File > New, and then choose Format > Make Plain Text. Paste the complete document below. Save it as shape-demo.html; if TextEdit asks which extension to use, choose Use .html. These are Apple’s documented steps for creating an HTML file. Apple: Work with HTML documents in TextEdit on Mac

The document includes its CSS and an encoded SVG containing an original circle-and-rectangle composition. There are no additional files or packages to install. The resource and the image element both declare dimensions of 1200 by 800.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape sizing demo</title>
  <style>
    body {
      margin: 0;
      padding: 24px;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
      color: #24343b;
    }

    main {
      max-width: 900px;
      margin: 0 auto;
    }

    .responsive-image {
      display: block;
      width: 100%;
      height: auto;
      background: #edf2f4;
    }
  </style>
</head>
<body>
  <main>
    <h1>Shape study A</h1>
    <p>Resize the window to change the composition's displayed size.</p>
    <img
      class="responsive-image"
      width="1200"
      height="800"
      alt="A blue circle beside an amber rounded rectangle."
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Crect width='1200' height='800' fill='%23edf2f4'/%3E%3Ccircle cx='360' cy='400' r='180' fill='%234b8090'/%3E%3Crect x='660' y='220' width='300' height='360' rx='40' fill='%23d6a96b'/%3E%3C/svg%3E">
    <p>Marker B: this paragraph follows the image in normal document flow.</p>
  </main>
</body>
</html>

Open the saved file in your browser and narrow the window. The composition should shrink proportionally, and Marker B should remain below it. Widening the window grows the composition until the example’s container reaches its 900-pixel maximum. That maximum is an illustrative page-design choice; it is not a requirement of the reservation technique.

The embedded resource loads immediately, so this example demonstrates responsive sizing rather than a visibly delayed download. Its encoded SVG was parsed and its dimensions checked with Python; the calculations below were also executed. Browser rendering was not executed during preparation.

To adapt the page to another resource, replace the src value and update both HTML dimensions to match that resource. Use unitless integers such as 1200, rather than 1200px, in these attributes. MDN specifies this format for image dimensions. MDN: The image embed element

How much space should the browser reserve?

For this simple layout, with no border or padding on the image, calculate the expected height as:

displayed height = displayed width × resource height ÷ resource width

Using the example’s 1200-by-800 dimensions gives these illustrative results. The widths refer to the image’s content box, not the entire browser window.

Displayed image width Proportional height
300 CSS pixels 200 CSS pixels
600 CSS pixels 400 CSS pixels
900 CSS pixels 600 CSS pixels

This calculation is also a useful diagnostic. Suppose the actual resource is 1200 by 800, but the HTML incorrectly declares 1200 by 600. At a displayed width of 600 pixels, the declared ratio suggests a 300-pixel height; the actual ratio requires 400 pixels. That leaves a potential 100-pixel correction when the natural ratio becomes available.

The correction follows from the auto portion of the ratio hint: an image with a natural aspect ratio uses that ratio once it is available. Accurate attributes therefore matter even when the stylesheet is correct. The CSS specification defines this distinction between a supplied ratio and a replaced element’s natural ratio. CSS Box Sizing Module Level 4: preferred aspect ratios

When should you use CSS aspect-ratio instead?

Use an explicit CSS ratio when your layout deliberately defines the shape of the image box. For example, a square tile is a different requirement from displaying the complete 3:2 composition proportionally.

The following is a replacement CSS fragment for the complete example. Replace its existing .responsive-image rule with this one:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #edf2f4;
}

Here, aspect-ratio: 1 / 1 requests a square box. The width remains responsive, and the automatic height is calculated from that width. A preferred aspect ratio needs at least one automatic dimension to influence sizing; explicitly setting both dimensions removes that role. MDN: aspect-ratio

The object-fit: contain declaration keeps the entire composition visible inside the square, leaving unused space where the shapes’ resource does not fill it. Changing the value to cover fills the square but clips part of the composition. Choose that behavior deliberately: cropping can remove meaningful parts of an image. MDN: object-fit

For a temporary ratio that should yield to the resource’s natural ratio, CSS also supports a value such as aspect-ratio: auto 3 / 2. That can change the box’s proportions after loading if the resource differs. A ratio without auto expresses the layout’s preferred shape instead. CSS Box Sizing Module Level 4: preferred aspect ratios

What should you check if the image still shifts or stretches?

Check the resource and layout in this order:

  1. Confirm both HTML dimensions. They should describe the resource accurately. A correct width paired with an incorrect height still supplies an incorrect ratio.
  2. Check the applied CSS height. For the proportional example, it should be auto. Another matching rule may be assigning a fixed height.
  3. Check the displayed width. The reservation calculation depends on the width established by layout. Resizing the browser intentionally changes that width and its proportional height.
  4. Check explicit ratio rules. A square CSS ratio and a 3:2 natural ratio express different sizing intentions.
  5. Check image fitting separately. contain and cover control how the resource fits inside its box; they do not supply the box’s missing dimensions.

These checks follow the distinction between the element’s box, its preferred ratio, and the resource rendered inside it. MDN’s aspect-ratio guide explains how explicit dimensions affect proportional sizing, while its object-fit reference documents fitting and clipping. MDN: Understanding and setting aspect ratios, MDN: object-fit

Browser support also has a boundary. MDN marks the CSS aspect-ratio property as widely available across browsers since September 2021. That does not establish support in every older browser, nor is it a compatibility date for every HTML dimension-mapping behavior. Check the documentation’s compatibility information when an older browser is part of your requirements. MDN: aspect-ratio

For the ordinary proportional-image task, start with accurate HTML dimensions and responsive CSS. Use an explicit CSS ratio when the page needs a particular box shape. Together, those choices let you reserve the intended space while allowing the displayed size to follow the page layout.

Sources