Как сделать мини-фото, чтобы его не сплющивало?

@StivinKing · Регистрация: 21.12.2012

Студворк — интернет-сервис помощи студентам

Доброго времени суток.

Имеется такая проблемка. Нужно закидывать в "новость" на сайте много фотографий (~ по штук 15-20). Если закидывать просто так - то страница получается слишком большой. Если пользоваться миниатюрами (с определенным размером по одной стороне) и выравнивать по левому краю, то из-за того что некоторые картинки большие по ширине, а другие по длине возникают дыры между ними.
Если по двум сторонам сжимать, то фотографию сплющивает.

Пните в нужную сторону. Как сделать так чтобы были фиксированные ширина и высота, но фотографию не сплющивало?

@kalabuni · 20.12.2014, 10:20

окиньте взглядом предметы мебели в помещении, в котором вы сидите
помещение - это, в принципе, такой же прямоугольник, как и ваш блок новостей
а предметы мебели - это фотографии, которые вы хотите сделать "фиксированными по высоте и ширине"

представьте себе стул, стол, диван и шкаф одних и тех же габаритов, чтобы их можно было разместить в помещении "без дыр" между ними"?
при этом чтобы функциональность предметов не менялась...но, чтобы при этом на стуле можно было улечься так же, как и на диване, полностью вытянув ноги?
и чтобы "в стол" можно было бы повесить пальто, так же, как и в шкаф?

получилось представить?
тогда поздравляю -- у вас очень богатая фантазия, на языке медицины называемая хроническим идиотизмом

нормальные люди проблему решают приблизительно таким способом

@StivinKing · 20.12.2014, 10:28 **[ТС]**

не понял сей морали, как и вы, видимо, не поняли сути вопроса

объясню получше.

Сжимая просто по ширине и высоте (к примеру к: 200х150) большинство фотографий сплющится.
Если же воспользоваться методами javascript (к примеру), то можно уменьшить до нужного размера (не сплющивая), а те места которые не вошли в данную рамку - просто удалить. Тем самым мы получаем качественные миниатюры одного размера, а при клике открывается исходная.

Мне лишь нужно узнать у ЗНАЮЩИХ как этот метод называется, чтобы без проблем произвести поиск по данному критерию.

@kalabuni · 20.12.2014, 10:36

"фотографии сплющатся" - это птичий словарь
нормальные люди напишут "фотографии отобразятся с искажением пропорций"

браузеры сделаны так, чтобы максимально достоверно передавать всю информацию

как вы собираетесь без искажений передать всю информацию, например, картинки габаритами 100 на 60, отобразив её в виде, урезанном и по ширине, и по высоте до 40 пикселей?
ответ - никак

так что не майтесь дурью. а лучше займитесь реальным делом

@StivinKing · 20.12.2014, 10:55 **[ТС]**

О боже... такое ощущение, что общаюсь с "школьником". Не в обиду.
Какое ваше дело как я называю то или иное решение? пусть то "сплющится" или "отобразится в искаженном виде"? На конференции или деловых переговорах будете называть вещи своими именами.
Я обратился за помощью с конкретным вопрос по конкретной теме. Решив узнать лишь "наименование" подхода к решению. А вы впустую написали столько строк "белиберды" которые ни к чему не привели.

Я вижу вы знаете свое дело, но похоже совсем не имеете представление о логике вещей. Как говорится: "Не знаешь как делать, не лезь".

Узнал на фрилансере, предоставили рабочий код (уже проверено).

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('img.shelf-img').each(function(i, item) {
    var img_height = $(item).height();
    var div_height = $(item).parent().height();
    if(img_height<div_height){
        //INCREASE HEIGHT OF IMAGE TO MATCH CONTAINER
        $(item).css({'width': 'auto', 'height': div_height });
        //GET THE NEW WIDTH AFTER RESIZE
        var img_width = $(item).width();
        //GET THE PARENT WIDTH
        var div_width = $(item).parent().width();
        //GET THE NEW HORIZONTAL MARGIN
        var newMargin = (div_width-img_width)/2+'px';
        //SET THE NEW HORIZONTAL MARGIN (EXCESS IMAGE WIDTH IS CROPPED)
        $(item).css({'margin-left': newMargin });
    }else{
        //CENTER IT VERTICALLY (EXCESS IMAGE HEIGHT IS CROPPED)
        var newMargin = (div_height-img_height)/2+'px';
        $(item).css({'margin-top': newMargin});
    }
});

Без обид. Каждый занимается тем чем желает, но будьте уж любезны обсудить, а не кидаться.

@kalabuni · 20.12.2014, 11:11

смешной вы

скрипт выше фиксирует картинки только по высоте, ширину картинок браузер подбирает автоматически --
$(item).css({'width': 'auto', 'height': div_height }); -- причём подбирает так, чтобы сохранилась пропорция "исходная ширина : исходная высота" -- только в этом случае картинка отобразится без искажений

ваше дебильное условие "чтобы были фиксированные ширина И высота" этот скрипт не реализует
потому что это реализовать невозможно, о чём я вам уже третье сообщение здесь пишу...
но вы же явно страдаете той болезнью, о которой я упоминал выше, поэтому своё собственное непонимание пытаетесь объяснить отсутствием логики у меня

@StivinKing · 20.12.2014, 11:16 **[ТС]**

Поставьте этот скрипт работать не на сторону клиента, а во время заливки на сервер. И вуаля.

@kalabuni · 20.12.2014, 11:51

Сообщение от StivinKing

Поставьте этот скрипт работать не на сторону клиента, а во время заливки на сервер. И вуаля.

увы, вы вовсе не понимаете, как работает WEB... вот это реально "вуаля"

картинка - они находятся на сервере с какими-то исходными размерами по высоте и ширине, например, 100 на 50
отобразить картинку в браузере без искажений можно в любом виде - хоть с исходными размерами, хоть увеличив, хоть уменьшив в любое количество раз
но в любом случае новые размеры картинки должны сохранять исходную пропорцию 100 к 50
и это никак не зависит от того, когда и как будет работать найденный вами скрипт (но совершенно непонятый вами)

@StivinKing · 20.12.2014, 12:39 **[ТС]**

они находятся на сервере с какими-то исходными размерами по высоте и ширине, например, 100 на 50

Да вы видимо даже и не читаете то что люди пишут? Ибо:

во время заливки на сервер

Что значит что на при заливке на сервер оно было, к примеру, 250х160, а после отправки на сервер и обработки скриптом, лежит себе спокойно обрезанное 100х100. При этом без "искажения пропорций"

но совершенно непонятый вами

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

Я пришел за помощью в реализации поставленной задачи, а получил лишь потраченное время на разговор с тем, кто ограничивается своими знаниями и не имеет представления о том, что есть и другие пути решения. Надеюсь другим вы помогаете куда лучше. Удачи вам в ваших делах.

@Taatshi · 20.12.2014, 13:45

StivinKing, Вы зря так себя ведете. Вам дело говорят. Обрезка изображений как правило проводится уже ПОСЛЕ заливки оного на хостинг.

@Eva Rosalene · 20.12.2014, 13:54

Сообщение от Taatshi

как правило

Как иначе-то?)

Комментарий модератора

StivinKing, kalabuni, будете продолжать поливать друг друга - получите по карте оба.

@Taatshi · 20.12.2014, 13:57

Не по теме:

Сообщение от FraidZZ

Как иначе-то?)

ДО заливки - в фотошопе :p

@Lazy_Den · 20.12.2014, 14:21

Не по теме:

Сообщение от Taatshi

ДО заливки - в фотошопе

Или с помощью ImageMagick на сервере. Например, метод cropThumbnailImage

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@StivinKing 7 / 7 / 3 Регистрация: 21.12.2012 Сообщений: 146

	Как сделать мини-фото, чтобы его не сплющивало? 20.12.2014, 09:56. Показов 1355. Ответов 12 Метки нет (Все метки) Доброго времени суток. Имеется такая проблемка. Нужно закидывать в "новость" на сайте много фотографий (~ по штук 15-20). Если закидывать просто так - то страница получается слишком большой. Если пользоваться миниатюрами (с определенным размером по одной стороне) и выравнивать по левому краю, то из-за того что некоторые картинки большие по ширине, а другие по длине возникают дыры между ними. Если по двум сторонам сжимать, то фотографию сплющивает. Пните в нужную сторону. Как сделать так чтобы были фиксированные ширина и высота, но фотографию не сплющивало? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	20.12.2014, 10:20
	окиньте взглядом предметы мебели в помещении, в котором вы сидите помещение - это, в принципе, такой же прямоугольник, как и ваш блок новостей а предметы мебели - это фотографии, которые вы хотите сделать "фиксированными по высоте и ширине" представьте себе стул, стол, диван и шкаф одних и тех же габаритов, чтобы их можно было разместить в помещении "без дыр" между ними"? при этом чтобы функциональность предметов не менялась...но, чтобы при этом на стуле можно было улечься так же, как и на диване, полностью вытянув ноги? и чтобы "в стол" можно было бы повесить пальто, так же, как и в шкаф? получилось представить? тогда поздравляю -- у вас очень богатая фантазия, на языке медицины называемая хроническим идиотизмом нормальные люди проблему решают приблизительно таким способом 1

@StivinKing 7 / 7 / 3 Регистрация: 21.12.2012 Сообщений: 146
	20.12.2014, 10:28 [ТС]
	не понял сей морали, как и вы, видимо, не поняли сути вопроса объясню получше. Сжимая просто по ширине и высоте (к примеру к: 200х150) большинство фотографий сплющится. Если же воспользоваться методами javascript (к примеру), то можно уменьшить до нужного размера (не сплющивая), а те места которые не вошли в данную рамку - просто удалить. Тем самым мы получаем качественные миниатюры одного размера, а при клике открывается исходная. Мне лишь нужно узнать у ЗНАЮЩИХ как этот метод называется, чтобы без проблем произвести поиск по данному критерию. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	20.12.2014, 10:36
	"фотографии сплющатся" - это птичий словарь нормальные люди напишут "фотографии отобразятся с искажением пропорций" браузеры сделаны так, чтобы максимально достоверно передавать всю информацию как вы собираетесь без искажений передать всю информацию, например, картинки габаритами 100 на 60, отобразив её в виде, урезанном и по ширине, и по высоте до 40 пикселей? ответ - никак так что не майтесь дурью. а лучше займитесь реальным делом 1

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	20.12.2014, 11:11
	смешной вы скрипт выше фиксирует картинки только по высоте, ширину картинок браузер подбирает автоматически -- $(item).css({'width': 'auto', 'height': div_height }); -- причём подбирает так, чтобы сохранилась пропорция "исходная ширина : исходная высота" -- только в этом случае картинка отобразится без искажений ваше дебильное условие "чтобы были фиксированные ширина И высота" этот скрипт не реализует потому что это реализовать невозможно, о чём я вам уже третье сообщение здесь пишу... но вы же явно страдаете той болезнью, о которой я упоминал выше, поэтому своё собственное непонимание пытаетесь объяснить отсутствием логики у меня 1

@StivinKing 7 / 7 / 3 Регистрация: 21.12.2012 Сообщений: 146
	20.12.2014, 11:16 [ТС]
	Поставьте этот скрипт работать не на сторону клиента, а во время заливки на сервер. И вуаля. 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	20.12.2014, 13:45
	StivinKing, Вы зря так себя ведете. Вам дело говорят. Обрезка изображений как правило проводится уже ПОСЛЕ заливки оного на хостинг. 0