@kasamara

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

Есть блок 195x195
При загрузке разных продуктов, картинки могут быть разных размеров
Если ширина картинки будет больше высоты то в блок она должна вставиться с шириной 195 и пропорционально изменить высоту (например 125) чтоб картинка не растягивалась при этом вверху и внизу добавить белый цвет
Далее она выравнивается по центру блока и по вверху и внизу по 35px замещается белым цветом и наоборот - если высота больше ширины, то высота подганяется под 195рх(по высоте) и изменяется ширина пропорционально не искажая картинку и слева и справа так же замещается белым
Как это реализовать? Смотрел готовые примеры миниатюр, но все они обрезают либо растягивают
  • Вопрос задан
  • 189 просмотров
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Такое CSS-решение не зависит ни от соотношения сторон самой картинки, ни от ширины контейнера (можно делать адаптивно без px, как в моем примере) + поддержка браузерами, можно сказать, максимальная + место под картинку не скачет, пока картинка грузится (lazyload оценит):
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
joeberetta
@joeberetta
Читай: https://epdf.pub/google-for-dummies.html
.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%'
Ответ написан
Комментировать
доброго времени суток.
Ранее писал на 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 "%5C
\n";
imageresize($fileto,$userfile,800,600,85);
} else {
echo "bad - $userfile
\n";
}
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
YCLIENTS Москва
от 200 000 до 350 000 ₽
Ведисофт Екатеринбург
от 25 000 ₽
ИТЦ Аусферр Магнитогорск
от 100 000 до 160 000 ₽