Skip to content

[css-sizing] Image aspect ratio revert to original width and height attribute #5836

@nextend

Description

@nextend

Width and height attributes for images define the aspect ratio of that image since: whatwg/html#4952

There should be a way in CSS to revert back to this original behavior if some other components redefined the width/height of that image in CSS.

Here is an example: https://jsfiddle.net/g74a0me2/1/

The following redefines the width and height of the image, so the aspect ratio won't work as the attributes are overridden.

img {
  width: 100%;
  height: 100wh;
}

Then we want to restore the original aspect ratio functionality for a subset of elements, but there is no way. For example with any of the following:

.my-image {
  width: auto;
  height: auto;
}

.my-image {
  width: initial;
  height: initial;
}

.my-image {
  width: revert;
  height: revert;
}

.my-image {
  width: attr(width px);
  height: attr(height px);
}

Related Chromium issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1161102#c9

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions