Need to create thumbnail images in a special way?

Question

PHP

There is a block 195x195
When loading different products, images can be of different sizes
. If the width of the image is greater than the height, then it should be inserted into the block with a width of 195 and proportionally change the height (for example, 125) so that the image does not stretch while adding white color at the top and bottom.
Next, it is aligned to the center of the block and at the top and bottom by 35px is replaced with white and vice versa - if the height is greater than the width, then the height is adjusted to 195px (in height) and the width changes proportionally without distorting the image and is also replaced with white on the left and right
How to implement this? I looked at ready-made examples of thumbnails, but they all crop or stretch

Answer 1

Such a CSS solution does not depend on the aspect ratio of the image itself, nor on the width of the container (it can be done adaptively without px, as in my example) + browser support, one might say, is maximum + the space for the image does not jump while the image is loading (lazyload will appreciate ):

Answer 2

.miniatura-block {
  width: 195px;
  height: 195px;
}

let miniatury = document.querySelectorAll('.miniatura-block img');
for(let i=0; i<miniatury.length; i++) 
  if(miniatury[i].offsetWidth > miniatury[i].offsetHeight) 
    miniatury[i].style.width = '100%'
  else
    miniatury[i].style.height = '100%'

Answer 3

Good day.
Previously, I wrote a code in php that takes all images from one folder, then resizes them depending on what the width or height is greater, and also inserts a watermark and saves the new ones in a new folder.
Only this script does not do as you indicate - it inserts on a white background, depending on the dimensions, while there are functions in order to implement as you need in the code. Now there is not enough time to tell in more detail, so if you understand php, remake it for yourself (the above functions are most likely enough).
Logically, you will need to: determine the size of the original. Depending on them, create a size for a new one. Next, resize the original. Calculate the coordinates to insert into the new resized source.
Here is my code as it was originally:
<?php
function imageresize($outfile,$infile,$neww,$newh,$quality) {
$im=imagecreatefromjpeg($infile);
$x = imagesx($im);
$y = imagesy($im);
if (($x < 200) and ($y < 200)) {
return true;
}
if (($x < $neww) and ($y < $newh)) {
$neww = $x;
$newh = $y;
}
$ko = $neww / $x;
$xx = $x;
$yy = $y;
if (($x != $neww) or ($y != $newh)) {
$xx = $neww;
$yy = round($y * $ko);
if ($yy > $newh) {
$yy = $newh;
$ko = $newh / $y;
$xx = round($x * $ko);
}
}
$im1=imagecreatetruecolor($xx,$yy);
imagecopyresampled($im1,$im,0,0,0,0,$xx,$yy,imagesx($im),imagesy($im));
// work with watermark
$wm=imagecreatefrompng('vznak.png');
$wmW=imagesx($wm);
$wmH=imagesy($wm);
$cx = $xx - $wmW - 20;
$cy = $yy - $wmH - 20;
imagecopyresampled($im1, $wm, $cx, $cy, 0, 0, $wmW, $wmH, $wmW, $wmH);
imagejpeg($im1,$outfile,$quality);
imagedestroy($im);
imagedestroy($im1);
imagedestroy($wm);
}
foreach (glob("img/*") as $file) {
$file = basename($file);
// $fileto = "newimg/$file";
$fileto = "newimg/" . strtolower($file);
$userfile = "img/$file";
if (imagecreatefromjpeg($userfile)) {
echo "
\n";
imageresize($fileto,$userfile,800,600,85);
} else {
echo "bad - $userfile
\n";
}
}