Keep a Base64 <img> in small thumbnail and original aspect

user_5063031 0
Viewed 197

Have an image applications, on the left is a narrow column contains many <img> thumbnails whose content is Base64, like <img src="dataimage/jpeg;base64,...">. Users click on one will display a much bigger image at right.

HTML attribute height="##" is very useful to keep the thumbnails in a small size even when it's clicked on. On the contrary, style="height:##; max-width:##; max-height:##" will change a thumbnail into a full-scale image and bump others over the cliff.

Most of the images are portrait, a few are wide landscape format. You can see a single height attribute is not good enough. So I add a width

<img src="dataimage/jpeg:base64;..." height="50" width="50">

it does help locking the width but turns all thumbnails into 50x50.

css image html
2 Answers

You can set static width and height and add object-fit: contain; to keep the aspect ratio:

input
{
  display: none;
}

.container
{
  min-height: 100vh;
}
.thumbs,
.container
{
  display: flex;
}

.thumbs
{
  flex-direction: column;
}

label > img
{
  width: 100px;
  max-height: 100px;
  object-fit: contain;
  cursor: pointer;
}

.full
{
  display: grid;
  overflow: hidden;
  position: relative;
  width: 100%;
  min-height: 100%;
}
.full > img
{
  opacity: 0;
  filter: blur(100px);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity 0.4s, filter 0.3s;
  order: 2;
  position: absolute;
}

input:checked:nth-of-type(1) ~ .full > img:nth-of-type(1),
input:checked:nth-of-type(2) ~ .full > img:nth-of-type(2),
input:checked:nth-of-type(3) ~ .full > img:nth-of-type(3),
input:checked:nth-of-type(4) ~ .full > img:nth-of-type(4)
{
  display: initial;
  opacity: 1;
  order: 1;
  top: 0;
  left: 0;
  filter: none;
}
<div class="container">
  <input id="t1" type="radio" name="thumb">
  <input id="t2" type="radio" name="thumb">
  <input id="t3" type="radio" name="thumb" checked>
  <input id="t4" type="radio" name="thumb">
  <div class="thumbs">
    <label for="t1"><img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj"></label>
    <label for="t2"><img src="https://lh3.googleusercontent.com/fl-GT6w3Ls6RT4vYnbkuYUyLY3lZJH8VtZ7xzxiym9YYaoVRCnZehdz6Icd0oAf6i3H9-O5cCNs6eunlxWr_Csstgsb98DdzNdLFBOlhw9NUfHdyuQjI=w768-h1024-n-l50-sg-rj"></label>
    <label for="t3"><img src="https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w1024-h683-n-l50-sg-rj"></label>
    <label for="t4"><img src="https://lh3.googleusercontent.com/aS2Up3osDMLTua1vXPTqnXko13KbIAmB0nQ44AP_IFTEt-VjUa6Tz2MC9jdH11bsZfjdiR8z4HbnxvhmmxSU1swKrtjc5PXreP6i=w1024-h683-n-l50-sg-rj"></label>
  </div>
  <div class="full">
    <img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj">
    <img src="https://lh3.googleusercontent.com/fl-GT6w3Ls6RT4vYnbkuYUyLY3lZJH8VtZ7xzxiym9YYaoVRCnZehdz6Icd0oAf6i3H9-O5cCNs6eunlxWr_Csstgsb98DdzNdLFBOlhw9NUfHdyuQjI=w768-h1024-n-l50-sg-rj">
    <img src="https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w1024-h683-n-l50-sg-rj">
    <img src="https://lh3.googleusercontent.com/aS2Up3osDMLTua1vXPTqnXko13KbIAmB0nQ44AP_IFTEt-VjUa6Tz2MC9jdH11bsZfjdiR8z4HbnxvhmmxSU1swKrtjc5PXreP6i=w1024-h683-n-l50-sg-rj">
  </div>
</div>

user_29300380

As I understand it you'd like the thumbnails to not go above 50px in height but the images to be within the narrow column width wise and to maintain their aspect ratios.

You can do this by using the CSS contain value on the object-fit property. The width and height of the img is set to be the width of the narrow column and a height of 50px (for example) and it will then be completely within those bounds, maintaining aspect ratio.

I don't think that the images being base64 or jpgs or... should make any difference.

.narrowcolumn {
  width: 40px;
  /* set this to whatever is required */
  display: inline-block;
}

.narrowcolumn img {
  width: 100%;
  height: 50px;
  /* set this to whatever you require */
  object-fit: contain;
  padding: 1px 0;
  /* added for demo just to separate them a bit */
}
<div class="narrowcolumn">
  <img src="https://picsum.photos/id/1018/300/300">
  <img src="https://picsum.photos/id/1015/200/300">
  <img src="https://picsum.photos/id/1016/300/200">
</div>

user_108674540
Related