[wp-trac] [WordPress Trac] #50909: WordPress 5.5 update adds height and width attributes to images

[WordPress Trac]

#50909: WordPress 5.5 update adds height and width attributes to images
--------------------------+------------------------------
 Reporter:  jeslen        |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  Media         |     Version:  5.5
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:
--------------------------+------------------------------

Comment (by jeslen):

 Replying to [comment:13 tmrg]:
 > Experiencing the same issue on my site.
 >
 > Jeslen - where exactly did you add that CSS code? To overall site or
 newpost page?
 >
 > Replying to [comment:9 jeslen]:
 > > Replying to [comment:8 pbgeneral]:
 > > > I'm having precisely this issue. It has distorted the images on
 hundreds of my articles, so it's a pretty serious matter.
 > >
 > > Adding this CSS should resolve the issue.
 > > {{{
 > > img {
 > >   max-width: 100%;
 > >   height: auto;
 > > }
 > > }}}
 > >
 > > Although I'm not sure if this will prevent the height attribute from
 working in scenarios where that is preferred.

 [[BR]]
 == The Answer:

 I'm going to explain my reasoning, and you can see if this makes sense for
 you and anyone else who stumbles across this answer.

 === TL;DR
 Add it to the the very top, or very bottom of your stylesheet (if the top
 doesn't work). Alternatively, search to find the last instance of the
 `img` selector in your CSS, and add it there.

 === The Explanation:

 CSS, a Cascading StyleSheet, is read by the browser top to bottom. If
 there are identical selectors in the same or other CSS files, which ever
 one is at the bottom will take priority. Stylesheets added to a page one
 after another will be treated as if they were just added on to the end of
 the first.

 For example, if a style sheet has `img { max-width: 100%; height:auto; }`
 and then the same sheet later has `img { height: 100%; }` (''notice the
 heights are different''), the browser will render all images with `max-
 width: 100%` and `height: 100%`.

 What's happening here is the first `img` selector instance is setting both
 the `max-width` and `height` styles, but the second instance of `img` is
 overriding the `height`. The browser will render the max-width style set
 from the first instance (`max-width: 100%`) while the height is rendered
 from the second (`height: 100%`).

 It should be noted that a more specific selector can take priority over
 these `img` selectors. For example, the CSS `img.square { width: 100px;
 height: 100px; }` will target HTML `img` elements with the square class
 assigned to them, like so `<img class='square' alt='...' src='...' />`.
 These images would then always be rendered with `height: 100px` even if
 this CSS statement appears earlier in the stylesheet than the others.

 So, ideally you'll likely want to add the image fix `img { max-width:
 100%; height: auto; }` as close to the top of the first loaded stylesheet.
 It's added to the top so that any further changes which are required by
 your theme can properly override these settings, if required.

 == Potential Problems:

 === CSS Unsets the Height

 There is a likely rare use case where the `img` selector already exists
 within the CSS and unsets the height as so `img { height: unset; }`. This
 will override the height by removing any height styles that have been set
 higher up in the sheet. In this case, if you added the fix top the top of
 the stylesheet and notice that it's not working, you could try searching
 to see if an `img` selector already exists somewhere else within.

 In a worst case scenario, you can add this to the bottom of the last
 loaded stylesheet to guarantee that these styles are always rendered by
 the browser.

 === Images Rely on Height Attribute

 If your theme did not set the height on an `img` selector anywhere in the
 CSS, but used the height attribute on some HTML `img` element like so
 `<img height='400' alt='...' src='...' />`, this is going to be overridden
 by your CSS in the same way the later instances of the same `img`
 selector—and the more specific selectors—would override the styles by
 taking priority. This is why adding these CSS styles will "fix" the issue.
 '''The CSS will override the HTML height attribute.'''

 The update is dynamically adding these attributes to the HTML `img`
 elements on the page. If this is distorting many of your images by
 stretching them, this CSS fix will be applied to ''all'' HTML `img`
 elements on your site, whether that is intended or not. Therefore, this
 could cause some weird behaviour for images that currently rely on the
 HTML `img` height attribute.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/50909#comment:14>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform