Image element attribute height is overridden

[FireIsGood]

Describe the issue

When setting the height attribute on an <img> element, the height is not respected and instead overridden by the default height: auto. This is different in general behavior from setting the width attribute, as that works as expected.

This is important because users cannot fix this with additional CSS since Pico itself is overriding the attribute styles.

Current Behavior

The height is overridden and instead based on the width of the image.

Expected Behavior

The image defaults should yield to height if the attribute is set.

Reproduction URL

https://codepen.io/fireisgood/pen/OJGwMLd

Environment

Chromium on Linux

Possible fix

The img default style could include a check that there is no height attribute defined on the element. This can be fixed with a selector like img:not([height]) which has 96% browser adoption as of writing.

Since there's also the border-style added in the same rule, this might have to be separated into two styles with the max-width and height on the new selector while the old is kept for general styles.

/* Current */
img {
    max-width: 100%;
    height: auto;
    border-style: none
}

/* Fixed */
img:not([height]) {
    max-width: 100%;
    height: auto;
}
img {
    border-style: none
}

To fix this, the line 38 of _embedded.scss would be changed to include the updated selectors.

/* Current */
  // 1. Remove the border on images inside links in IE 10.
  // 2. Responsive by default
  #{$parent-selector} img {
    max-width: 100%; // 2
    height: auto; // 2
    border-style: none; // 1
  }

/* Fixed */
  // Remove the border on images inside links in IE 10.
  #{$parent-selector} img {
    border-style: none; // 1
  }
  // Responsive by default
  #{$parent-selector} img:not([height]) {
    max-width: 100%; // 2
    height: auto; // 2
  }

If this sounds good, I can make a pull request of this real quick, or you can just copy over the fixed code and push it.