All tags/Thumbnails

The whole picture, as WebP

fit=contain keeps every pixel inside the box; format= and quality= choose the file that is made.

1 The template img/contain.pad pad

<div style="display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center">
  {img 'photos/dunes.jpg',   width=260, height=260, fit='contain', format='webp', quality=70, alt='Sand dunes, the full portrait picture'}
  {img 'photos/harbour.jpg', width=260, height=260, fit='contain', format='webp', quality=70, alt='The harbour, the full landscape picture'}
</div>

2 The result rendered on the server