Bad value “100%” for attribute “height” on element “img”: Expected a digit but saw “%” instead.

The HTML specification defines the height attribute on <img> as a “valid non-negative integer,” which means it must consist only of digits — no units, no percentage signs. When you write height="100%", the validator expects a digit character but encounters %, producing this error. The same rule applies to the width attribute.

This matters for several reasons. First, browsers use the width and height attributes to reserve the correct amount of space for an image before it loads, which prevents layout shifts (a key performance metric known as Cumulative Layout Shift). When the value contains invalid characters like %, browsers may ignore the attribute entirely or interpret it unpredictably, undermining this layout reservation. Second, invalid HTML can cause inconsistent rendering across different browsers and assistive technologies. Third, the percentage-based sizing you likely intended simply isn’t supported through HTML attributes — it requires CSS.

The fix depends on what you’re trying to achieve:

• Fixed dimensions: Replace the percentage with a plain integer representing the image’s intrinsic or desired pixel size (e.g., height="300").
• Responsive or percentage-based sizing: Remove the height attribute (or set it to the image’s intrinsic pixel dimensions) and use CSS to control how the image scales within its container.

It’s a good practice to always include both width and height attributes with the image’s actual intrinsic dimensions, then use CSS to override the display size. This gives browsers the aspect ratio information they need to reserve space while still allowing flexible layouts.

Examples

Incorrect: percentage value in the height attribute

This triggers the validation error because % is not a valid digit:

<img src="photo.jpg" width="100%" height="100%" alt="A landscape photo">

Fixed: using integer pixel values

Specify the image’s intrinsic dimensions as plain numbers:

<img src="photo.jpg" width="800" height="600" alt="A landscape photo">

Fixed: combining HTML attributes with CSS for responsive sizing

Set the intrinsic dimensions in HTML for layout stability, then use CSS to make the image responsive:

<style>
  .responsive-img {
    width: 100%;
    height: auto;
  }
</style>

<img
  src="photo.jpg"
  width="800"
  height="600"
  class="responsive-img"
  alt="A landscape photo">

With this approach, the browser knows the image’s aspect ratio (800×600) and reserves the appropriate space, while CSS ensures the image scales fluidly to fill its container. The height: auto rule maintains the correct aspect ratio as the width changes.

Fixed: filling a container with CSS only

If you don’t know the image’s intrinsic dimensions and simply want it to fill a container, you can omit the HTML attributes and rely entirely on CSS:

<style>
  .image-container {
    width: 300px;
    height: 200px;
  }

  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

<div class="image-container">
  <img src="photo.jpg" alt="A landscape photo">
</div>

The object-fit: cover property ensures the image fills the container without distortion, cropping as needed. Note that omitting width and height attributes means the browser cannot reserve space before the image loads, so this approach may cause layout shifts. Where possible, prefer including the intrinsic dimensions as shown in the previous example.

Learn more:

MDN Reference

MDN: height property

→