from full-width to boxed, responsive even as background
<div class="co-1">
<picture>
<source media="(min-width: 94em)" srcset="img/16x9-2500.webp">
<source media="(min-width: 62em)" srcset="img/3x2-2000.webp">
<source media="(min-width: 40em)" srcset="img/1x1-1600.webp">
<source media="(min-width: 20em)" srcset="img/2x3-1600.webp">
<img src="img/3x2-1600.jpg" alt="responsive picture">
</picture>
</div>
or just
<div class="co-1">
<img src="img/a-3x2-1800x1200.webp" alt="100% width image">
</div>
Responsive picture/srcset with 16:9, 3:2, 1:1 and 2:3 aspect ratios inside a single full-width column
<section>
<div class="co-1">
<picture>
<source … srcset="img-16x9.jpg">
</picture>
</div>
</section>
Class img-fill for sections to let the responsive picture srcset stretch beyond the column grid
<section class="img-fill">
<div class="co-1">
<picture>
<source … srcset="img-16x9.jpg">
</picture>
</div>
<div class="imgteaser-content col top"> </div>
</section>
The aspect ratio classes overrule the images’ own dimensions. To illustrate that I picked the wrong images here to show that it works.
Aspect-ratio class 1x1
<div class="co-4">
<img … class="ar-11">
</div>
Aspect-ratio class 2x3
<div class="co-4">
<img … class="ar-23">
</div>
Aspect-ratio class 16x9
<div class="co-2">
<img … class="ar-169">
</div>
of applications for responsive, fluid and aspect-ratio flexible image formats. Some of the most common combinations of flexible layout grids and responsive image formats have their own subpages.
In marketing and/or e-commerce the card, teaser or tile is everywhere. Another example would be the freeform gallery where no two pieces have to look the same, but still are completely valid and resposive web.
<img> width: 100% inside any .co-*
.img-fill for <sections> with full-width images that behave like backgrounds but can use picture/srcset for breakpoints and imgteaser-content on top.
.card-head overrides .card padding top, left & right with negative margins
.ar-21 landscape 2:1
.ar-169 landscape 16:9
.ar-32 landscape 3:2
.ar-43 landscape 4:3
.ar-11 square 1:1
.ar-45 portrait 4:5
.ar-23 portrait 2:3
.ar-12 portrait 1:2
There are some features of f·p that require more modern browsers, but not that much. Apart from gap, which affects the grid substantially and is available in all browsers that are not older than 6-7 years, there are image-related formats and css properties that won't work on ten year old browsers.
First and foremost the image format webp as a successor to jpeg, that demands e.g. Safari to be no older than 14.0 (macOS 11), Chrome had much earlier support.
The aspect-ratio classes require 2020-ish browsers in order to work, so you might want to use jpgs in their native aspect-ratio when targeting older systems or for the fallback img in the picture srcset context.
Picture srcset itself could be an issue, but the subset used here is good to go on anything newer than 2015.
The examples here only use the fallback 3:2 jpg versions to stay consistent with the code exmples, since srcsetting every image essentially would mean duplicating all 15 (3 x 5 sizes) sample images with their jpg counterparts – which are 6-8 times bigger. So the demo slideshow and galleries only work on contemporary gear in this case, but using static jpgs could easily fix that.
Disclaimer: Everything here is free to use, but no responsibility is taken for any outcome. Questions & Suggestions: ak at alexkoch dot net (you‘re not a robot, I know). And I don‘t use cookies. Version history