Вывод картинок, имеющих разный размер

@galaid · Регистрация: 20.09.2011

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

Добрый вечер.

При выводе картинок сталкнулся с проблемой. Дело в том, что все картинки имеет разный размер, а мне необходимо сделать так, чтобы картинки ишли в строке одна за одной (float: left;). Так, например, одна может быть вытянутой в длину, другая же будет иметь квадратную форму. При выводе такие картинки смотрятся не очень красиво: к примеру в одной строке может быть 3 картинки, в другой 4, в третьей одна. Плюс ко всему высота строк получается неодинаковой.

Пробывал задавать фиксированное значение для размеров картинки, но получается также некрасиво. Скажите как решить такую проблему?

P.S. Пример удачного решения такой проблемы можно наблюдать на странице со списком фотографий в социальной сети ВКонтакте. По сути мне надо что-то похожее.

@koza4ok · 19.06.2013, 00:00

Можно сделать картинки с резиновой шириной.Если 4 картинки ,то делаем им ширину 20% и 5% на отступы.Здесь логично и рационально наверно будет использовать таблицу.

@galaid · 19.06.2013, 00:10 **[ТС]**

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

Можно сделать картинки с резиновой шириной.Если 4 картинки ,то делаем им ширину 20% и 5% на отступы

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

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

Здесь логично и рационально наверно будет использовать таблицу.

Без разницы. С дивами тоже логично и рационально.

Добавлено через 1 минуту
Имеется ввиду визульно обрезать картинку.

@Forastero · 19.06.2013, 01:25

Может воспользоваться JQuery плагином для составления мозаики?
Вот, к примеру, вот таким: http://sapegin.github.io/jquery.mosaicflow/
Вроде бы симпатично смотрится.

@newJS · 19.06.2013, 06:17

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

а мне необходимо сделать так, чтобы картинки ишли в строке одна за одной (float: left

.

А флоат картинкам зачем? Картинка это строчный элемент.

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

По сути мне необходимо обрезать картинки, выходящие за определенные границы,

Обрезать, значит потерять часть картинки, может все же масштабировать?

@Alorian · 19.06.2013, 09:27

Самое простое — привести картинки к одной высоте. Задать высоту картинок прямо в пикселях, при этом не указывая ширину. Картинки автоматически с сохранением пропорций увеличатся или уменьшатся до указанной высоты, ширина проставится автоматически.

@Lovrentiy · 19.06.2013, 12:19

Строго задать размеры картинки, не входящий остаток будет обрезаться:

CSS

.some_class {
width: 100px; 
height: 100px; 
background-image: url(../image.jpg); 
background-position: center center;
}

@galaid · 19.06.2013, 12:22 **[ТС]**

Lovrentiy, хорошая идея. Правда я вывожу их из массива при помощи PHP, поэтому использовать их как фон возможно немного неудобно, но возможно

@Lovrentiy · 19.06.2013, 12:26

добавьте в php вывод не только картинок, но и блоков, вернее вывод блоков через if и в нём же через if картинки, всем див блокам задаешь общий класс и в CSS уже прописываешь правило.

@galaid 289 / 34 / 6 Регистрация: 20.09.2011 Сообщений: 464
		1
	Вывод картинок, имеющих разный размер 18.06.2013, 23:25. Показов 10145. Ответов 8 Метки нет (Все метки) Добрый вечер. При выводе картинок сталкнулся с проблемой. Дело в том, что все картинки имеет разный размер, а мне необходимо сделать так, чтобы картинки ишли в строке одна за одной (float: left;). Так, например, одна может быть вытянутой в длину, другая же будет иметь квадратную форму. При выводе такие картинки смотрятся не очень красиво: к примеру в одной строке может быть 3 картинки, в другой 4, в третьей одна. Плюс ко всему высота строк получается неодинаковой. Пробывал задавать фиксированное значение для размеров картинки, но получается также некрасиво. Скажите как решить такую проблему? P.S. Пример удачного решения такой проблемы можно наблюдать на странице со списком фотографий в социальной сети ВКонтакте. По сути мне надо что-то похожее. 0

@koza4ok 632 / 440 / 67 Регистрация: 19.09.2012 Сообщений: 1,632
	19.06.2013, 00:00	2
	Можно сделать картинки с резиновой шириной.Если 4 картинки ,то делаем им ширину 20% и 5% на отступы.Здесь логично и рационально наверно будет использовать таблицу. 0

@galaid 289 / 34 / 6 Регистрация: 20.09.2011 Сообщений: 464
	19.06.2013, 00:10 [ТС]	3
	Сообщение от koza4ok Можно сделать картинки с резиновой шириной.Если 4 картинки ,то делаем им ширину 20% и 5% на отступы Не совсем то, что мне хотелось бы. По сути мне необходимо обрезать картинки, выходящие за определенные границы, а с теми, которые меньше этой границы, увы ничего не поделаешь. Сообщение от koza4ok Здесь логично и рационально наверно будет использовать таблицу. Без разницы. С дивами тоже логично и рационально. Добавлено через 1 минуту Имеется ввиду визульно обрезать картинку. 0

@Forastero 562 / 339 / 87 Регистрация: 15.05.2013 Сообщений: 812 Записей в блоге: 1
	19.06.2013, 01:25	4
	Может воспользоваться JQuery плагином для составления мозаики? Вот, к примеру, вот таким: http://sapegin.github.io/jquery.mosaicflow/ Вроде бы симпатично смотрится. 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	19.06.2013, 06:17	5
	Сообщение от galaid а мне необходимо сделать так, чтобы картинки ишли в строке одна за одной (float: left. А флоат картинкам зачем? Картинка это строчный элемент. Сообщение от galaid По сути мне необходимо обрезать картинки, выходящие за определенные границы, Обрезать, значит потерять часть картинки, может все же масштабировать? 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	19.06.2013, 09:27	6
	Самое простое — привести картинки к одной высоте. Задать высоту картинок прямо в пикселях, при этом не указывая ширину. Картинки автоматически с сохранением пропорций увеличатся или уменьшатся до указанной высоты, ширина проставится автоматически. 0

@galaid 289 / 34 / 6 Регистрация: 20.09.2011 Сообщений: 464
	19.06.2013, 12:22 [ТС]	8
	Lovrentiy, хорошая идея. Правда я вывожу их из массива при помощи PHP, поэтому использовать их как фон возможно немного неудобно, но возможно 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	19.06.2013, 12:26	9
	добавьте в php вывод не только картинок, но и блоков, вернее вывод блоков через if и в нём же через if картинки, всем див блокам задаешь общий класс и в CSS уже прописываешь правило. 0