Tech fitting images viewport

[jake-abma]

New technique for Using Fitting Images for Reflow, you can preview Using CSS max-width and height to fit images, and there is an associated example page.

[jake-abma]

Wondering if we should also mention a case to the use of width: 100% to not only allow an image to scale down if it has to, but also scale up than its original size if the container allows.

[jake-abma]

For stock images I'm wondering what kind we would like to use... ?! For now I've used some WAI images to work with.

[jake-abma]

And what about the use of the srcset property to provide multiple versions of images and have the browser do the work of figuring out which image fit best?

[detlevhfischer]

I don't mind if any of these are used: http://oturn.net/photos/index.html (I own the copyright)

[alastc]

Hi Jake,

Most of my comments are of the 'keep it simple' variety :-)

• I suggest a picture rather than screenshot, which brings with it text-in-images issues. You can use anything from my Flickr stream, I officially release the W3C from need to attribute those picture.
• I wouldn't worry about saying images can be expanded with width:100%, but do we want to talk about the relation to the width attribute? I think CSS overrides that, at least in terms of max-width.
• I'd say "content" rather than text here: "equivalent to 256 CSS pixels for text intended to scroll horizontally"
• Do we want to 'define the height'? I thought the default height for something with a width or max-width was 'auto'? Maybe I'm not upto date on that?
• I found the paragraph starting "Layouts..." a bit confusing, do you essentially mean this?

"Responsive layouts can add or remove colomns or layout blocks, and each part of the layout can be wider or smaller at different points. This technique ensures images do not break out of their layout area, including in one-column layouts where it would cause scrolling."

The examples & procedure look good, so not much to change.

[jake-abma]

• pictures added
• "text intended changed to "content intended"
• "height: auto" deleted as this will be set by default
• paragraph starting "Layouts..." changed

@alastc will you do a final text check or will this be enough?