Style info on HTML img elments

[rbeezer]

I believe every div.image-box, and every sidebyside panel-div (class name is in flux, sbspanel right now) containing an image, has inside it an img element with

style="width: 100%; height: auto;"

which is how we get an image to fit the width of the containing div (box) while preserving aspect ratio and using only as much height as necessary. One exception is when the sidebyside panel is a PTX figure, and then there is an intermediate HTML figure element. So two cases

div.sbspanel
  img/style="width: 100%; height: auto;"

div.sbspanel
  figure
    img/style="width: 100%; height: auto;"

Once we rework sidebyside and class names settle down, could CSS provide this style information?

Follow-on from #1158

[davidfarmer]

Yes, we can put that style on the img with CSS and not inline. We are close to needing an upgrade of the Javascript (because of work I am doing on reading questions), so it may make sense to change the CSS at the same time. Let's do a creful audit of any other ways that images might appear.

…

On Sun, 4 Aug 2019, Rob Beezer wrote: I believe every div.image-box, and every sidebyside panel-div (class name is in flux, sbspanel right now) containing an image, has inside it an img element with style="width: 100%; height: auto;" which is how we get an image to fit the width of the containing div (box) while preserving aspect ratio and using only as much height as necessary. One exception is when the sidebyside panel is a PTX figure, and then there is an intermediate HTML figure element. So two cases div.sbspanel img/style="width: 100%; height: auto;" div.sbspanel figure img/style="width: 100%; height: auto;" Once we rework sidebyside and class names settle down, could CSS provide this style information? Follow-on from #1158 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute thethread.[AABTULH7UWEDPEKDQR3FT63QC5FMNA5CNFSM4IJGJ6DKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFS M4HDIJX5Q.gif]

[rbeezer]

I'm 99% confident that a PTX image is bare, inside mainline figure, a panel of a sidebyside, or inside a figure inside a sidebyside. But of course, I will check. This is the beauty of keeping the schema up-to-date. ;-)

I'll also see if there is any other CSS that might look like it needs backward-incompatible changes. I'd love to retain div.sidebyside as part of obsoleting div.sbsrow, and would like to rename div.sbspanel to be div.panel, reasoning that this might make a screen-reader experience better if those class names were read aloud? @Alex-Jordan Is this the case?

[rbeezer]

Searched on img in HTML conversion. Uses above. Plus "posters" on videos (still images until they play), will perhaps do similar with audio. MathJax logo, "brand logo" in masthead, some code for Statcounter that we don't choose to show.

[rbeezer]

Beta at: https://pretextbook.org/beta/2019-08-04-image-style

Removed all @style="width: 100%; height: auto;" extant on HTML img elements.

[davidfarmer]

I added CSS to replace the inline sizing on img tags (width: 100%, but I left off the
height because that does not seem to matter. Let me know if I am missing something.)

All the images in the sample article look the same as originally, so the code can
be merged and this issue closed.

Presumably the related issues (#1182 for example) can be addressed by changes to
.sbspanel and to .image-box, with corresponding CSS changes.