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

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

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

В новостях встречаются стоящие рядом две картинки, и часто они имеют разные пропорции. Можно ли задать в 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

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

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@Ermakoff 0 / 0 / 0 Регистрация: 22.03.2016 Сообщений: 8

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

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

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

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