Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
0 / 0 / 0
Регистрация: 11.04.2017
Сообщений: 5

Как выровнить резиновые картинки по высоте?

11.04.2017, 21:45. Показов 899. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
HTML5
1
2
3
4
5
<div class="block-4">
<img src="1.jpg">
<img src="1.jpg">
<img src="1.jpg">
 </div>
CSS
1
2
3
4
5
6
.block-4 {
max-width:990px; margin: 0 auto;
}
.block-4 img {
width:25%; height:auto; 
}
У меня 4 кратинки, которые влезают в блок. Но исходные размеры картинок разные. По ширине картинки нормально умещаются, но вот по высоте у некоторых картинок получается отсутп снизу. Как сделать так, чтоб картинки были одинаковыми по высоте? Нарезать картинки в исходниках очень долго. Их много будет.
Полазил по форуму. Нашел решение с JS, но там правда для колонок. Я его применил, картинки по высоте выравнялись, но при уменьшение окна высота не уменьшается пропорционально ширине картики. Хотелось бы какое-то просто решение найти с помощью css (указывать картинки как background не подходит).
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
11.04.2017, 21:45
Ответы с готовыми решениями:

Резиновые картинки
Доброго времени суток! Прошу Вашей помощи с резиновыми картинками для сайта на битриксе..-) Я не профи. Делаю сама и для себя. ...

Сделать резиновые svg-картинки
подскажите, есть ли возможность чтобы svg картинки были резиновые ? пару дней пытаюсь решить это, более менее удалось через img когда...

Как создать адаптивные равные по ширене и высоте картинки без шаблонизаторов?
Как создать адаптивные равные по ширене и высоте картинки? Блоку в котором изображение имеет width в % .header__img { width:...

1
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
11.04.2017, 21:58
Или динамическая ширина, или динамическая длина, или обрезать выступающие края стилем overflow
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
11.04.2017, 21:58
Помогаю со студенческими работами здесь

Блок не растягивается по высоте картинки
Здраствуйте! есть блок содержащий текст и картинки. проблема в том что блок не растягивается на высоту картинки. Ширина картинки у меня...

Сделать квадратные картинки (ширина равна высоте), не зная их размеров
можно ли сделать картинки квадратными, тоесть ширина=высота(чтото типа style=&quot;width:100%, height: width&quot;), когда изначально не знаешь...

Как выровнять контрол грида MSHFlexGrid по высоте равным высоте всех его строк
Т.е. нужно чтобы визуально грид вмещал ВСЕ строки источника. Проблема в том , что высота строки грнда .MSHFlexGrid1.RowHeight(1) равна...

Как выровнить форму
Ребят, а подскажите, как выровнить вот, чтобы поля формы и картинка были одинаковые, на одном уровне, одной высоты, чтобы ровненько. В...

Резиновые массивы в Delphi, как?
Всем привет! Изучаю потихоньку Delphi и появился очередной вопрос. У меня следующая задача - иметь под рукой какой-нибудь список,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Символьное дифференцирование
igorrr37 13.02.2026
/ * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .
Камера 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. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru