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

Аватар пользователя Лала Лала 8 сентября 2019 в 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 КБ

Лучший ответ

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

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

Комментарии

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

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

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

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

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

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

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

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

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

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

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

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

Аватар пользователя Лала Лала 10 сентября 2019 в 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 сентября 2019 в 1:30
1

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