Выравнивание двух изображений с разными размерами

@Ermakoff · Регистрация: 22.03.2016

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

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

Ниже примеры, для наглядности.

На первом скрине - как выглядят изображения, если указана ширина для класса.

Выравнивание двух изображений с разными размерами

На втором скрине - если задать высоту изображений для класса. Тогда слетает ширина и изображение растягивается

Нужно, чтобы это выглядело как-то так:

@Fedor92 · 22.03.2016, 15:27

Ermakoff, вставляйте с помощью background картинки и будет Вам счастье...

@Ermakoff · 22.03.2016, 15:33 **[ТС]**

Fedor92, думаю с таким же успехом у каждой фотки я могу указать размеры. Дело в том, что новостей много, и изображения везде разные. Я надеялся, что возможно им создать универсальный класс. А указать класс для фоток гораздо проще в моём случае.

@Fedor92 · 22.03.2016, 15:41

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

Fedor92, думаю с таким же успехом у каждой фотки я могу указать размеры.

Вообще с фоном всегда проще работать, поскольку помимо размеров есть такие замечательные свойства, как background-size к примеру...

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

Дело в том, что новостей много, и изображения везде разные

Сам уже пару дней страдаю от этой фигни... Сделал встроенным стилем фон и не парюсь... Фотки, что повыше выровнял по верху блока, остальные адаптировал и обрезал по ширине... Если делать по человечески, то лучше попробовать поискать скрипт, который будет нормализовать изображения по ширине и высоте...

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

Я надеялся, что возможно им создать универсальный класс.

Как вариант можно попробовать обернуть изображения в блок, задать жёсткие размеры и попробовать поколдовать с overflow:hidden... Может и получится чего...

@Ermakoff · 22.03.2016, 15:48 **[ТС]**

Хорошо, попробую с фоном. А то на 30 странице новостей уже мыло перед глазами. Т.е. делаем див, в котором указываем изображения в качестве фона? Или как? Для каждого изображения получается будет свой див будет или можно обе фотки в один запихнуть?

@Fedor92 · 22.03.2016, 15:55

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

Т.е. делаем див, в котором указываем изображения в качестве фона? Или как?

Если делать фоном то да... Пишите для фона встроенный стиль, где задаёте background, а в качестве пути указываете переменную из шаблона, чтобы картинки он автоматом вытаскивал без ручной линковки... Каждую фотку в отдельный див - одна ведь будет шире, а другая выше...

@Ermakoff · 22.03.2016, 16:13 **[ТС]**

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

а в качестве пути указываете переменную из шаблона, чтобы картинки он автоматом вытаскивал без ручной линковки...

Не выйдет, все картинки вставлены просто в текст, без каких-либо переменных или какой-то системности.

@Fedor92 · 22.03.2016, 16:33

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

Не выйдет, все картинки вставлены просто в текст, без каких-либо переменных или какой-то системности.

Сочувствую, тогда это засада... Придётся доводить до ума для начала хаос... Вы же не будете для всех картинок размазывать свои параметры... Тогда остаётся только индивидуальный класс для картинок с резиновой шириной и высотой и блоком обёрткой...

@Ermakoff 0 / 0 / 0 Регистрация: 22.03.2016 Сообщений: 8
		1
	Выравнивание двух изображений с разными размерами 22.03.2016, 15:18. Показов 3032. Ответов 7 Метки нет (Все метки) В новостях встречаются стоящие рядом две картинки, и часто они имеют разные пропорции. Можно ли задать в css, чтобы они сжимались до одинакового размера по высоте, и чтобы при этом ширина пропорционально уменьшалась. Ниже примеры, для наглядности. На первом скрине - как выглядят изображения, если указана ширина для класса. На втором скрине - если задать высоту изображений для класса. Тогда слетает ширина и изображение растягивается Нужно, чтобы это выглядело как-то так: 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	22.03.2016, 15:27	2
	Ermakoff, вставляйте с помощью background картинки и будет Вам счастье... 0

@Ermakoff 0 / 0 / 0 Регистрация: 22.03.2016 Сообщений: 8
	22.03.2016, 15:33 [ТС]	3
	Fedor92, думаю с таким же успехом у каждой фотки я могу указать размеры. Дело в том, что новостей много, и изображения везде разные. Я надеялся, что возможно им создать универсальный класс. А указать класс для фоток гораздо проще в моём случае. 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	22.03.2016, 15:41	4
	Сообщение от Ermakoff Fedor92, думаю с таким же успехом у каждой фотки я могу указать размеры. Вообще с фоном всегда проще работать, поскольку помимо размеров есть такие замечательные свойства, как background-size к примеру... Сообщение от Ermakoff Дело в том, что новостей много, и изображения везде разные Сам уже пару дней страдаю от этой фигни... Сделал встроенным стилем фон и не парюсь... Фотки, что повыше выровнял по верху блока, остальные адаптировал и обрезал по ширине... Если делать по человечески, то лучше попробовать поискать скрипт, который будет нормализовать изображения по ширине и высоте... Сообщение от Ermakoff Я надеялся, что возможно им создать универсальный класс. Как вариант можно попробовать обернуть изображения в блок, задать жёсткие размеры и попробовать поколдовать с overflow:hidden... Может и получится чего... 0

@Ermakoff 0 / 0 / 0 Регистрация: 22.03.2016 Сообщений: 8
	22.03.2016, 15:48 [ТС]	5
	Хорошо, попробую с фоном. А то на 30 странице новостей уже мыло перед глазами. Т.е. делаем див, в котором указываем изображения в качестве фона? Или как? Для каждого изображения получается будет свой див будет или можно обе фотки в один запихнуть? 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	22.03.2016, 15:55	6
	Сообщение от Ermakoff Т.е. делаем див, в котором указываем изображения в качестве фона? Или как? Если делать фоном то да... Пишите для фона встроенный стиль, где задаёте background, а в качестве пути указываете переменную из шаблона, чтобы картинки он автоматом вытаскивал без ручной линковки... Каждую фотку в отдельный див - одна ведь будет шире, а другая выше... 0

@Ermakoff 0 / 0 / 0 Регистрация: 22.03.2016 Сообщений: 8
	22.03.2016, 16:13 [ТС]	7
	Сообщение от Fedor92 а в качестве пути указываете переменную из шаблона, чтобы картинки он автоматом вытаскивал без ручной линковки... Не выйдет, все картинки вставлены просто в текст, без каких-либо переменных или какой-то системности. 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	22.03.2016, 16:33	8
	Сообщение от Ermakoff Не выйдет, все картинки вставлены просто в текст, без каких-либо переменных или какой-то системности. Сочувствую, тогда это засада... Придётся доводить до ума для начала хаос... Вы же не будете для всех картинок размазывать свои параметры... Тогда остаётся только индивидуальный класс для картинок с резиновой шириной и высотой и блоком обёрткой... 1