Bug 78944 – height + max-height values break proportional image scaling

• Status: NEW
• Component: CSS

[Bryan Buchanan]

Created attachment 127674 [details]
Minimal test case

If an image has both a height and max-height assigned, and the width is isn't defined or set to auto, any scaling of the image will ONLY happen vertically. The horizontal image size is kept static instead of scaling to keep the image's correct proportion.

Example:

An image is 400x400px with a css height of 400px and a min-height of 200px. In previous version of WebKit and other browsers, the image would be scaled to 200x200px, but in the current version (including the current release of Google Chrome), the image is scaled to 400x200px, completely distorting the image.

This seems to only happen with height/max-height. Running the same text with width/max-width works fine. Removing the "height" value also fixes the issue.

Attached in a very minimal test case. In the wild, I know you probably wouldn't use pixel values for both height and max-height, it just makes for an easier example.

[Shane Stephens]

I think this is actually correct behaviour, according to the CSS2.1 specification. The used values of width and height are calculated iteratively based on min/max-width and min/max-height, but there doesn't seem to be any mechanism for iterating on width based on an adjustment in height.

(See http://www.w3.org/TR/CSS2/visudet.html, especially the sections on calculating widths and heights).

I will attempt to confirm this with our resident CSS expert, however.

[Bryan Buchanan]

That may be true (I'm honestly not familiar with the spec), but automatically scaling image width (when not defined) to maintain correct proportion is something that previous versions of WebKit, and the current versions of Firefox/Gecko and IE all do. The behavior I'm describing is something that was just introduced recently.

Images are content, and distorting/modifying content shouldn't be default behavior. I'd think images should never be distorted unless they're explicitly instructed to be.

If you had a horizontal row of images with matching heights (with max-height) and variable widths, it'd be possible to do in every major browser except the latest releases of WebKit. I believe you'd have to use JavaScript.

[Bryan Buchanan]

The "bug" I'm describing is in the Safari 5.2 beta as well.

[Bryan Buchanan]

Created attachment 150362 [details]
Other Test Case

In this example, there is an image set to be 50% of the window's height, but with a max-height of 300px. If your browser window is less than 600px in height, the image appears square, as it should. If your browser is greater than 600px in height, you can see the image get distorted.

[Ahmad Saleem]

Other Test Case (Fixed) - https://jsfiddle.net/1ec7wuqz/

Minimal Test Case (Fixed) - https://jsfiddle.net/fd2vgj37/