Image layout test page

I want to experiment with wider layouts, so want to have HTML/CSS formulas for breaking out of the normal content flow.

House styles

Permalink to “House styles”

Copy-paste-able snippets for image arrangements.

One image

Permalink to “One image”

Two images

Permalink to “Two images”

Three images

Permalink to “Three images”

Multiple rows

Permalink to “Multiple rows”

Specify Height

Permalink to “Specify Height”

Blur stretch singles

Permalink to “Blur stretch singles”

Workbook

Permalink to “Workbook”

My process of working through getting the house styles.

Small, centered

Permalink to “Small, centered”

This image should be smaller than the main page flow, so should be centered.

256

The next one should also be smaller and centered.

500

Pixel density

Permalink to “Pixel density”

This image should display at 256. The source is 768. For displays that use higher pixel densities (e.g., retina displays, most phones), it should be crisp.

768-d256

To compare two side-by-side, the following images are both displayed at 256 x 256 pixels, but their source images are:

  1. 256 x 256 pixels
  2. 768 x 768 pixels (i.e., exported @3x)
256
256@3x

I use 3x for all higher-pixel-density images on this page simply because that’s best for my own devices. But devices should render any source / display ratio. E.g., here’s 0.5x, 2x, and 4x.

256@0.5x

@0.5x

256@2x

@2x

256@4x

@4x

Text width image, pixel density

Permalink to “Text width image, pixel density”

Even without manually specifying a width (as we did in the above pixel density test), we expect the page width clamping to have the same effect, and higher pixel count images to be crisper.

The current full width of the layout is 704px.

The following image is 704 x 704 px, rendered at that size on the page.

704

The following image is 2112 x 2112 px, rendered at 704 x 704 px on the page.

704

Excellent.

We could go to 4x for future-proofing, but I think there is diminishing returns, even with devices.

Real image, pixel density

Permalink to “Real image, pixel density”

Deep dive into this in Image size test page

Full-width image

Permalink to “Full-width image”

This image will take up the full width of the page no matter what size the image or the page is. (My screen only goes up to 1680px width.) It will have no horizontal margins.

1680x945

Full-width image, with horizontal margins

Permalink to “Full-width image, with horizontal margins”

See next section for technique notes. (These images aren’t width-limited, so they may go past 1500px width.)

1500x300

ph2

1500x300

ph3

1500x300

ph4

Wider-than-text width centered image

Permalink to “Wider-than-text width centered image”

While the page width is ≤ the image width, this image will take up the full width of the page with no horizontal margin. Once the page is wider than the image, it will be centered in the page with equal horizontal margins.

1000x500

We achieve the breakout by using the .full-width CSS class designed for full-width images, but we instead put it on a parent <div> to the image. This <div> then takes up the full screen width, and the image is free to position inside it.

For a desired 3x pixel density (width px: src 3k, disp 1k), its width needs to be manually limited, or it will, by default, be displayed at its true “size” and a lower pixel density. This can be accomplished with the attribute width="1000" or style="width: 1000px;"

Wider-than-text width centered image, horizontal margins

Permalink to “Wider-than-text width centered image, horizontal margins”

… as needed as the page shrinks.

1000x500

ph3

Max-width (centered) wider img, horizontal margins only on ~m+ sizes

Permalink to “Max-width (centered) wider img, horizontal margins only on ~m+ sizes”

Desired behavior:

  • small (phone): no H margins (want to see as much of photo as possible)
  • medium: some H margins
  • large: bigger than photo, so margins don’t matter
1000x500

ph1-m ph3-l

Three images arranged wider than text

Permalink to “Three images arranged wider than text”

These each take up exactly 1/3:

512x683 512x683 512x683

We can add a horizontal page margin:

512x683 512x683 512x683

⅓, ph3

If we make them each take 33%, they distribute the remaining 1% of available width between them.

512x683 512x683 512x683

33%, ph3

We can set their max-width CSS so they are spaced more evenly when space is available.

512x683 512x683 512x683

⅓, ph3, max-width imgs

This effect—using available spacing—is more readily visible with smaller images.

300x400 300x400 300x400

⅓, ph3, max-width imgs

To get the images to stay closer to the center, you make the images bare and add justify-center flex. However, they then have no margin. Adding padding or margins works until the page shrinks so their widths are shrinking; then they balloon out past the page width with their extra margins/padding. To fix, I had to wrap them in <div>s, then control the padding on the outside. Making the images proper (max) widths then involves a calc() on the <div>. Quite complex.

300x400
300x400
300x400

justify-center + ph2; divs w/ ⅓, ph1, max-width (on divs); imgs bare

Turning up the padding is fine. Be careful going down the rabbit hole of trying to get consistent horizontal page margins, though. Because of symmetric padding on the image <div>s (which we need so the images are the same size and they aren’t shifted L or R on the page), combined with overall padding, we end up in 0.5 Tachyon units (I think). LOL went down rabbit hole. Turns out switching to margins makes this somehow all work beautifully, and don’t even need calc() in the max-widths, because we’re not affecting the image sizes now. (Next example still uses padding; house style uses margins.)

300x400
300x400
300x400

justify-center + ph3; divs w/ ⅓, ph2, max-width (on divs); imgs bare

Regardless, we now have something that looks and works fine for 3 max-width’d imgs w/ some margins.

Seeking a “house style” below:

300x400
300x400
300x400

Margin 1 between images always. Page border is: nothing (small), 1 (m), 3 (l).

Testing this third house-style w/ larger images

512x683
512x683
512x683

Margin 1 between images always. Page border is: nothing (small), 1 (m), 3 (l).

Simplifying from later findings; I think we don’t need w-third at all.

Portrait and landscape w/ “house style”

Permalink to “Portrait and landscape w/ “house style””

The following isn’t working:

704x939
1252x939

Broken portrait & landscape (first image shrinks before & too much). Margin 1 between images always. Page border is: nothing (small), 1 (m), 3 (l).

While margins are fine, and the heights all match up at full size, but the height of the first image is shrinking before the second.

Wild enough, removing the <div> third/two-third widths fixed.

704x939
1252x939

Fixed portrait & landscape. Margin 1 between images always. Page border is: nothing (small), 1 (m), 3 (l).

Mixed sizes with house style

Permalink to “Mixed sizes with house style”
704x939
939x939

Incredibly, this just works as well. My takeaway is to export things to be the same height and then let flexbox’s basic layout take it away.

Other little tricks

Permalink to “Other little tricks”
  • make images db (i.e., display: block) so that divs don’t leave little bits of extra space apparently for descender elements

  • accordingly, then add mv1 when doing grids for vertical spacing

  • … and relatedly, don’t forget to add novmargin to the images so that the margins can be controlled with the containing <div>s

Rewrapping

Permalink to “Rewrapping”

Simply adding flex-wrap to the container gives us a simple wrap, where elements are wrapped as soon as the row can’t fit both at full size. We can add novmargin to the images and fig to the container if we want them to wrap closely (moving the vertical margin to the overall block).

704x939
939x939

Rewrapping w/ house style, but doing immediate when smaller than full size.

Ideally, I’d want to be able to choose to wrap only when they’ve shrunk to a certain size. In other words, we don’t need the photos to be full size, but there might be a significantly smaller display size (like if it would only be 200px wide or something) for which we’d rather wrap.

This might be possible using display: grid and grid-template-columns: ..., but TBD still. A couple resources:

… or, wait, maybe we can just use a media query to only add flex-wrap! Going from the house style below. Also needed to do margin adjustments: inter-pic margin is right only when not wrapped, and bottom when wrapped.

This isn’t perfect, because I think once the page width is less than even 600px or so, the photo get a bit too small, and this only wraps < 480px. But realistically, this will fix the other major viewing use case (phones), and all the media queries work exactly together, so I think it’s worth it.

Doing for 3 imgs too:

Height limits

Permalink to “Height limits”

I can’t ignore it: I probably implicitly designed for image heights that fit my viewport. Let’s think about limiting them.

Capping @ view height. Should we also set another max height? It actually seems to look pretty good everywhere.

Does this work for 2 imgs?

Wow, yes, it does beautifully… I guess I should just go for this? Only potential downside would be over-stretching for bigger screen devices. But honestly, being > CSSpx but < PHYSpx isn’t the end of the world, it’s already better than most photo displays people are going to encounter.

One more test: 1 img portrait.

Capping @ view height, portrait.

I think the answer here is that “it depends on the design.” For almost all layouts, a portrait photo isn’t going to get that big. For laptop/desktop/ipad-in-landscape, the height caps the img, leaving lots of space in the width, and it goes with the flow. For a phone, the width caps it, since they’re so tall, and the photo only takes up ~1/2 of the screen. BUT, the one exception is the iPad in portrait mode. It’s exactly portrait-photo-size, so a big portrait photo will fill the whole thing.

That’s where the design part comes in. If it’s a nice photo, it could be really cool. If it’s kinda crummy, yeah, it’ll be a huge crummy photo. If you want to design around that for iPad users in portrait mode, then throw in a min(100vh, 939px) or something. Otherwise, just keep 100vh and roll with it.

Determination for max-height:

  • min(100vh, 939px) — general purposes. let images be seen in full, and also keep things at least @2x. wider displays will have photo sets nicely centered in the middle
  • 939px — portrait images we want as bigger/establishing. this way smaller desktops will have it display larger (than the viewport height), and we’re keeping things crisp for ipads rather than having them blow up huge.

Varying Widths: Region Filling

Permalink to “Varying Widths: Region Filling”

Ugh, the thing I didn’t want to address.

In some situations, this will happen inevitably as long as we’re limiting photo heights to viewport heights, and are unwilling to make surrounding photos more narrow (width-limited). Examples:

  1. a portrait photo, then a landscape one

  2. a landscape photo (height-limited), then two side-by-side photos (width-limited)

I’m still torn philosophically on limiting photos to viewport heights. I think I like it, at least for landscapes. For portraits where the aim is more establishing footage, I’m not so sure; they’d be so tiny on a poorly-dimensioned landscape-oriented screen.

I am pretty confident limiting side-by-side images to narrower widths is bad, though. They are already nearly too small at full-screen with full width access; much smaller and it’s basically pointless to have them.

Assuming I do end up with consecutive varying photo row widths, the main thing I can try is some background. Below contains a graveyard (in comments) of approaches, with one that finally worked:

  • ❌ SVG-generated fractal noise (colors too random)
  • ❌ BG gradient (manual + didn’t look good)
  • ❌ BG gradient + alpha (manual, still didn’t look good)
  • ❌ BG image, as addl. element, CSS blurred (could not get horizontal edges crisp)
  • ❌ BG image, as parent. element, opacity w/ background-blend-mode (could not get blurring, didn’t look good without)
  • BG image, as addl., element, blurred w/ SVG filter (hat-tip) (looks good, can re-use image, crisp edges). Implemented below:

However, now a new challenge arises: it’s too wide.

Varying Widths: Width Matching [draft]

Permalink to “Varying Widths: Width Matching [draft]”

Because the photos are now all viewport height-limited, it’s possible for even side-by-side images to not take up the full width. This means that our new burred image background gets 100% page width when it shouldn’t.

Reading a bit about CSS Flexbox, it seems like it really only thinks row-by-row. When there’s a new flex row, it doesn’t know about the content above it. This seems to be a problem because I explicitly want my rows to be of equal width. CSS Grid is recommended for 2D layouts.

However, thinking a bit more, my constraints are kind of odd:

  • the target width should be determined dynamically by the contents of the rows
  • the target width will be the largest combined content width
  • all rows will achieve this target width
  • for rows whose content fills less than the target width
    • the columns inside should spread to fill the remaining space proportionally
    • the content should be centered
    • the backgrounds will have blurred/semi-transparent versions of the images
  • all items become 1 per row for smaller displays
  • ideally, none of this uses JavaScript
  • ideally, this is achieved with minimal manual markup

… phew.

I can see why you’d want to simply design on a fixed-width grid.

garage entry metadata

started Jul 10, 2022
updated Jul 30, 2022
disclaimer This is an entry in the garage. It may change or disappear at any point.