HTML Validation

Bad value “auto” for attribute “height | weight” on element “img”: Expected a digit but saw “a” instead.

About This HTML Issue

The width and height attributes on <img> elements expect a digit to specify the dimension in pixels. It should not contain units, letters or percent signs.

You can achieve this using CSS instead, for example:

<!-- Invalid syntax, the height attribute expects only digits -->

<img src="photo.jpg" alt="cat" height="auto" />

<!-- Valid syntax using CSS -->

<img src="photo.jpg" alt="cat" style="height: auto"  />

Learn more:

→ MDN: the img element

Last reviewed: October 27, 2022

Was this guide helpful?

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing

Related W3C Validator Issues

Bad value “auto” for attribute “height” on element “video”: Expected a digit but saw “a” instead.

The height attribute on the <video> element must be a non-negative integer representing the height in CSS pixels. The value “auto” is not a valid value for this attribute. To resolve the issue, set the height attribute to a specific numeric value or adjust the height using CSS instead.

Example with a numeric height value:

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Alternatively, control the height using CSS:

<video width="640" controls style="height: auto;">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

In the CSS approach, “auto” can be used, but it should not be part of the HTML attributes.

Bad value “auto” for attribute “sizes” on element “img”: Bad CSS number token: Expected a minus sign or a digit but saw “a” instead at “auto”.

The sizes attribute specifies the size of the image when it is displayed on different devices.

The error message is saying that the value auto is not a valid value for the sizes attribute.

To fix this issue, you need to replace the value auto with a valid size. You can use a width descriptor or a media query to specify the size for different device widths.

Here’s an example of using a width descriptor:

<img src="example.jpg" sizes="(max-width: 600px) 100vw, 50vw" />

This example sets the size of the image to 100% of the viewport width when the device width is less than or equal to 600px, and 50% of the viewport width for larger device widths.

Alternatively, you can remove the sizes attribute altogether and let the browser decide the best size for the image based on the viewport size.

<img src="example.jpg" />

If you do this, the browser will use the default sizes value of 100vw and will scale the image accordingly.

Bad value “auto” for attribute “width” on element “img”: Expected a digit but saw “a” instead.

The width attribute on the img element must be a positive integer representing the number of pixels.

The HTML img element’s width and height attributes are expected to specify image dimensions in pixels. According to the HTML Living Standard, these attributes accept only non-negative integers. These integers define the rendered dimension of the image, overriding the actual image size based on its native resolution. The value “auto” is not a valid integer, which leads to the validation error you’ve encountered.

Here is a correct usage example of the img element:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Valid Image Width</title>
</head>
<body>
  <img src="example.jpg" alt="Example image" width="200" height="100">
</body>
</html>

In the example above, the width is set to 200, and the height is set to 100. Both values are non-negative integers representing pixel dimensions. If you intend to maintain the image’s aspect ratio while adjusting another dimension, you can omit one of the attributes, and modern browsers will automatically adjust the aspect ratio based on the given dimension.

Bad value “auto” for attribute “width” on element “video”: Expected a digit but saw “a” instead.

The error message is indicating that the width attribute of the <video> element has an invalid value. According to the HTML specification, the width attribute expects a non-negative integer value, representing the pixel width of the video.

The value "auto" is not valid for the width attribute. Instead, specify a full number that indicates the pixel width of the video. If you want the video to be responsive without specifying a fixed width, you can use CSS to achieve that.

Here are two ways to resolve this:

Specify a valid pixel value for width:

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Use CSS for a responsive video player:

Instead of using the width attribute, use CSS to set the width of the video element. This allows the video to adjust its size according to the container or viewport.

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

<video class="responsive-video" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

In the second example, the video will scale based on its containing element, maintaining its aspect ratio due to the height: auto; CSS rule. This approach offers more flexibility for responsive design.

CSS: “gap”: “auto” is not a “gap” value.

The gap property in CSS does not accept auto as a valid value.

The gap property is used with CSS Grid and Flexbox layouts to define the spacing between grid tracks or flex items. Acceptable values for gap include length values such as px, em, %, or keywords such as normal. The value auto is not valid for the gap property; instead, use valid length units or the normal keyword.

Correct usage:

<div style="display: grid; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Incorrect usage (produces a validation error):

<div style="display: grid; gap: auto;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

For responsive or dynamic spacing, set the gap property to a valid length (e.g., 1rem, 10px, 5%) or use media queries to adjust spacing at different breakpoints.

Ready to validate your sites?
Start your free trial today.

Pro Trial Free Trial