Нужно создать миниатюру картинок особенным образом?

Question

[kasamara]

Есть блок 195x195
При загрузке разных продуктов, картинки могут быть разных размеров
Если ширина картинки будет больше высоты то в блок она должна вставиться с шириной 195 и пропорционально изменить высоту (например 125) чтоб картинка не растягивалась при этом вверху и внизу добавить белый цвет
Далее она выравнивается по центру блока и по вверху и внизу по 35px замещается белым цветом и наоборот - если высота больше ширины, то высота подганяется под 195рх(по высоте) и изменяется ширина пропорционально не искажая картинку и слева и справа так же замещается белым
Как это реализовать? Смотрел готовые примеры миниатюр, но все они обрезают либо растягивают

Comments

[Rustam Bainazarov]

img {
width: 100%;
height: 100%;
object-fit: contain;
}

Есть хак, если не устраивает поддержка object-fit, как сделать без него. Позже выложу.

[FanatPHP]

Как раз на той неделе рассуждали, какой процент похапешников не умеет в пропорции (4 класс средней школы, емнип).

[Rustam Bainazarov]

FanatPHP, в целом, жесткие пропорции результата обработки картинок от сервера в px не смогут не помочь, если используется адаптивный дизайн в верстке, где все на процентах. Это уже задача CSS.

Если, конечно, не вписывать на сервере картинки в квадрат, а там, где есть пустое пространство, — делать заливку белым цветом (только это плохо, ибо дизайн может поменяться — и картинки надо будет переделывать).

[Rustam Bainazarov]

kasamara, написал ответ.

Answer 1

[Rustam Bainazarov]

Такое CSS-решение не зависит ни от соотношения сторон самой картинки, ни от ширины контейнера (можно делать адаптивно без px, как в моем примере) + поддержка браузерами, можно сказать, максимальная + место под картинку не скачет, пока картинка грузится (lazyload оценит):

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

[Евгений Николаев]

доброго времени суток.
Ранее писал на php код, который берёт из одной папки все изображения, затем ресайзит их в зависимости что больше ширина или высота, а ещё вставляет водяной знак и новые сохраняет в новой папке.
Только этот скрипт не делает как Вы указываете - вставляет на белый фон, в зависимости от рамеров, при этом функции для того чтобы реализовать как Вам надо в коде есть. Сейчас недостаточно времени чтобы рассказать детальнее, поэтому если разбираетесь в php переделайте под себя(приведённых функций скорее всего достаточно).

По логике Вам потребуется: определить размеры исходного. В зависимости от них создать размер для нового. Далее отресайзить исходное. Рассчитать координаты для вставки в новое отресайзенного исходного.

Вот мой код как он был изначально:

<?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));

// работа с водным знаком
$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";
}
}