Озывчивое изображение

Аватар пользователя Лала Лала 8 сентября в 23:15

Здравствуйте.
Если можно подскажите в чём может быть суть моей проблемы.
Предыстория. У меня мало опыта работы с Drupal (8). Пытаюсь сделать тестовый сайт по макету. Использую тему Beginning (с Bootstrap 4) - подтему. Вёрстка с использованием Grid. В макете есть галерея изображений с разной шириной и высотой. Создаю 3 стиля изображения ( "Масштабирование и обрезка"), соответственно:
Ширина 535px Высота 260px
Ширина 260px Высота 260px
Ширина 260px Высота 535px

Создаю адаптивный стиль изображения. Выбираю: " Выбрать множество стилей изображения и использовать атрибут размера изображения." И отмечаю все 3 своих стиля изображения. Думаю, что браузер сам подберёт стиль к сетке:

.wrap_grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 13px;

.views-row {

&:nth-child(1) {
grid-column: 1/3;
}

&:nth-child(5) {
grid-column: 2/4;
}

&:nth-child(6) {
grid-row: 2/4;
grid-column: 4/5;
}

Но получаю обрезанные наполовину изображения, которые должны быть 260х260px и 260х520px. Изображения 535х260px выводятся как надо. Фото прикрепляю.
Возможно ли создать такую сетку без написания кода (здесь я совершенно не разбираюсь)?
Ешё вопрос. Что писать в поле : "Размер"?

ВложениеРазмер
Иконка изображения obrezka_img.png454.82 КБ
0 Thanks

Лучший ответ

Аватар пользователя Mnilionic Mnilionic 10 сентября в 1:30
1

Вам нужно не шаблоны искать и стили.
Например ширину Drupal.ru ограничивает вот этот стиль:

Комментарии

Аватар пользователя Лала Лала 9 сентября в 22:06

Вот такой макет, он от автора ролика с Youtube. Хочу сверстать именно с Grid (ролик посвящён вёрстке на Grid). У меня такой "курс обучения" для себя. Сначала пытаюсь сделать сама. Потом смотрю как у автора. Но там в обычном HTML верстается. (Я нашла несколько модулей на drupal.org для такой галереи.)

Аватар пользователя Mnilionic Mnilionic 9 сентября в 14:38
1

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

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

Аватар пользователя Лала Лала 10 сентября в 0:44

Попробовала с object-fit: cover. Результат порадовал. Потому что

   max-width: auto;
         width: 100%;
          display: block;

не помог.
В "Cредство форматирования" выбрала Изображение (не Отзывчивое, обычное). И только Масштабирование.

Осталась одна проблема. Как расширить площадь галереи на весь экран, как на макете. Нужно какой-то шаблон переопределять?

Аватар пользователя Mnilionic Mnilionic 10 сентября в 0:52
1

Смотрите в консоле браузера, какой стиль задаёт или фиксирует ширину. Переопределите этот стиль.

Аватар пользователя Лала Лала 10 сентября в 1:01

Это twig-шаблоны? Тогда скорее всего эти?

<!-- FILE NAME SUGGESTIONS:
   * page--front.html.twig
   * page--node--11.html.twig
   * page--node--%.html.twig
   * page--node.html.twig
   x page.html.twig
-->
Аватар пользователя Mnilionic Mnilionic 10 сентября в 1:30
1

Вам нужно не шаблоны искать и стили.
Например ширину Drupal.ru ограничивает вот этот стиль: