HTML Guide for auto
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" />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.
The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.
This property can express a value in different units like px, em, % or ch, and keyword values, but auto is not an allowed value.
Some examples of valid values for max-width:
/* <length> value */
max-width: 3.5em;
/* <percentage> value */
max-width: 75%;
/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content(20em);
/* Global values */
max-width: inherit;
max-width: initial;
max-width: revert;
max-width: unset;The CSS property padding-block does not accept auto as a value. The padding-block property is used to set the padding on the block-level start and end sides of an element, and it expects length values (like px, em, %, etc.) or global values like inherit, initial, revert, revert-layer, unset.
Here’s how you can fix this issue by providing valid values for the padding-block property.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Padding Block Example</title>
<style>
.example {
/* Incorrect use of 'auto' */
/* padding-block: auto; */
/* Correct use of padding-block with length values: */
padding-block: 20px 10px;
/* You can also use single value for same padding on both sides: */
/* padding-block: 15px; */
/* Or use percentage values: */
/* padding-block: 2% 1%; */
/* Or inherit, initial, revert, unset */
/* padding-block: inherit; */
}
</style>
</head>
<body>
<div class="example">
This is an example demonstrating correct use of padding-block.
</div>
</body>
</html>Explanation:
-
Length values: You can specify the padding using absolute units like px, em, rem, etc. In the example above, padding-block: 20px 10px; applies 20px padding to the block-start and 10px to the block-end.
-
Single Length Value: Using padding-block: 15px; applies the same padding (15px) to both block-start and block-end.
-
Percentage values: padding-block: 2% 1%; will apply 2% of the containing block’s size to block-start and 1% to block-end.
-
Global values: You can also use inherit, initial, revert, revert-layer, or unset to control CSS inheritance and initial values.