Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 01.02.2020, 12:30   #1
Novum
Новичок
Джуниор
 
Регистрация: 01.02.2020
Сообщений: 1
Вопрос Как выровнять по высоте изображения в CSS Grid?

Здравствуйте!
Помогите советом новичку. Очень хочу разобраться с системой Grid.
Я сделала на страничке подобие галереи, всего из 3-х фотографий.
https://codepen.io/Novumel/pen/abzPWyw
Блок галереи - это один грид, а в нем создала еще три грида. Их область я заполнила фотографиями
.image {
width: 100%;
height: 100vh;
object-fit: cover;
display: block;
}
Изображения получаются равными по высоте, но деформируются по ширине. Если я делаю height: 100%, то изображения получаются симметричными, но разными по высоте.
Я, конечно, могла бы установить высоту отдельно для каждой фотографии в каждом медиа запросе. Но я-то надеялась, что CSS Grid как раз позволит сделать все проще. Но как - не пойму. Видимо, я упускаю некое основополагающее правило.
Кто шарит в гридах - подскажите, а то у меня уже мозг закипает))
Novum вне форума Ответить с цитированием
Старый 19.02.2020, 13:20   #2
maks1331
Форумчанин
 
Аватар для maks1331
 
Регистрация: 20.12.2016
Сообщений: 270
По умолчанию

Можно каждому блоку задать в качестве фона изображение и выровнять его по центру.
Это решает вопрос с разными размерами картинок и всё будет смотреться хорошо, единственный минус - нужно задавать высоту и ширину для блоков.
формошлеп.рф
witech.su
maks1331 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать выделение по высоте narem HTML и CSS 3 02.01.2017 00:54
растягивание таблиц по высоте BloodMaX HTML и CSS 0 20.12.2011 14:59
деформирование странице по высоте Lx62GjVWZQJFjPD HTML и CSS 0 27.10.2011 14:24
Выравнивание по высоте Painkiller_13 Общие вопросы Delphi 2 09.07.2011 18:47
Проблема в высоте таблицы в ие7 siteograf HTML и CSS 0 09.05.2010 21:24