Как задать пропорциональное уменьшение такому блоку?
может у кого то есть пример верстки такого блока?
html
<section class="rooms"> <div class="container"> <p class="rooms__subtitle">Our Room</p> <h2 class="rooms__title title"> A World of <span class="orange-text">Choice</span> </h2> <p class="rooms__subtext subtext"> Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat. </p> <div class="rooms__box"> <div class="rooms__card rooms__card--one"> <img class="rooms__card-img" src="images/room-1.jpg" alt="" /> <p class="rooms__card-guests">3 GUESTS</p> <p class="rooms__card-text">Room with View</p> </div> <div class="rooms__card rooms__card--two"> <img class="rooms__card-img" src="images/room-3.jpg" alt="" /> <p class="rooms__card-guests">1 GUESTS</p> <p class="rooms__card-text">Luxury Room</p> </div> <div class="rooms__card rooms__card--three"> <img class="rooms__card-img" src="images/room-4.jpg" alt="" /> <p class="rooms__card-guests">6 GUESTS</p> <p class="rooms__card-text">Appartment</p> </div> <div class="rooms__card rooms__card--four"> <img class="rooms__card-img" src="images/room-2.jpg" alt="" /> <p class="rooms__card-guests">5 GUESTS</p> <p class="rooms__card-text">Small Room</p> </div> <div class="rooms__card rooms__card--five"> <img class="rooms__card-img" src="images/room-5.jpg" alt="" /> <p class="rooms__card-guests">4 GUESTS</p> <p class="rooms__card-text">Medium Room</p> </div> </div> </div> </section> |
<section class="rooms"> <div class="container"> <p class="rooms__subtitle">Our Room</p> <h2 class="rooms__title title"> A World of <span class="orange-text">Choice</span> </h2> <p class="rooms__subtext subtext"> Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat. </p> <div class="rooms__box"> <div class="rooms__card rooms__card--one"> <img class="rooms__card-img" src="images/room-1.jpg" alt="" /> <p class="rooms__card-guests">3 GUESTS</p> <p class="rooms__card-text">Room with View</p> </div> <div class="rooms__card rooms__card--two"> <img class="rooms__card-img" src="images/room-3.jpg" alt="" /> <p class="rooms__card-guests">1 GUESTS</p> <p class="rooms__card-text">Luxury Room</p> </div> <div class="rooms__card rooms__card--three"> <img class="rooms__card-img" src="images/room-4.jpg" alt="" /> <p class="rooms__card-guests">6 GUESTS</p> <p class="rooms__card-text">Appartment</p> </div> <div class="rooms__card rooms__card--four"> <img class="rooms__card-img" src="images/room-2.jpg" alt="" /> <p class="rooms__card-guests">5 GUESTS</p> <p class="rooms__card-text">Small Room</p> </div> <div class="rooms__card rooms__card--five"> <img class="rooms__card-img" src="images/room-5.jpg" alt="" /> <p class="rooms__card-guests">4 GUESTS</p> <p class="rooms__card-text">Medium Room</p> </div> </div> </div> </section>
css
.rooms { margin-bottom: 100px; } .rooms__subtitle { margin: 0 auto 16px; font-size: 24px; font-weight: 700; line-height: 31px; text-align: center; } .rooms__title { margin-bottom: 18px; } .rooms__subtext { margin-bottom: 45px; } .rooms__box { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 36px 40px; } .rooms__card { max-width: 100%; max-height: 100%; } .rooms__card img { max-width: 100%; max-height: 100%; } .rooms__card--two { grid-column: 2/3; grid-row: 1/3; } .rooms__card--five { grid-column: 3/4; } .rooms__card-img { margin-bottom: 18px; } .rooms__card-guests { font-size: 14px; line-height: 18px; opacity: 0.6; margin-bottom: 6px; } .rooms__card-text { font-size: 22px; font-weight: 600; line-height: 29px; } |
.rooms { margin-bottom: 100px; } .rooms__subtitle { margin: 0 auto 16px; font-size: 24px; font-weight: 700; line-height: 31px; text-align: center; } .rooms__title { margin-bottom: 18px; } .rooms__subtext { margin-bottom: 45px; } .rooms__box { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 36px 40px; } .rooms__card { max-width: 100%; max-height: 100%; } .rooms__card img { max-width: 100%; max-height: 100%; } .rooms__card--two { grid-column: 2/3; grid-row: 1/3; } .rooms__card--five { grid-column: 3/4; } .rooms__card-img { margin-bottom: 18px; } .rooms__card-guests { font-size: 14px; line-height: 18px; opacity: 0.6; margin-bottom: 6px; } .rooms__card-text { font-size: 22px; font-weight: 600; line-height: 29px; }
Нужно чтоб галерея уменьшалась пропорционально. В моей вертске выходит так, что при сужении ширины карточки с картинкой и инфой выглядят в разнобой вот так
Дополнительно:
Что такое aspect-ratio знаете?вот меняйте эту величину, уберите margin или используйте css переменные и в медиа запросе меняйте эти переменные..
Так же касается размера текста..
В мобиле блоки должны быть друг под другом, то есть столбиком но возможно два блока...
Проблема в правильном описании высоты картинки. Вот пример. обрати внимание на .rooms__card-img . Я еще немного покрутил гап для того чтобы верстка стала на место, но это уже сам доставишь под свои нужды.
- Тоже пришел к такому варианту, но происходит налезание картинки на текст.
- Overlord934, первое что приходит в голову - задать для карточки дисплей флекс и картинке поставить flex:1. То есть разметить текст а остальное картинка
- Kentavr16, помогло, спасибо.
- Overlord934, Помогло - отметь решением.
- Overlord934, не могли бы вы объяснить, по какой причине картинка налаживалась на текст и как нам помог flex? Чтоб глубже понять работу флексов. Что сделал понятно, а почему работает не понятно)
- Overlord934, если ранее мы задавали размер картинки в процентах - она реально становилась размером в родительский блок. При этом не учитывались остальные элементы, отсюда и наложение. Если бы не было флекса и нам нужно было решать этот вопрос, пришлось бы скорее всего проводить вычисления высот в стилях или подключать скрипты. Флекс же по своей природе призван решать такого рода проблемы с адаптивностью, являясь идеальным инструментом для выравнивания строк/колонок. Все его правила на это и ориентированы, собственно. Подробно в доках, пересказывать про оси и базовые линии смысла нет. в данном случае мы сказали флексу - вот два элемента, текст занимает вот столько, остальное оставь под картинку. Просто и эффективно.
- Kentavr16, Все понял, благодарю за помощь
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для задания пропорционального уменьшения блоку кода с помощью тега
вам нужно использовать CSS. Вот пример того, как можно задать пропорциональное уменьшение для блока кода на вашем сайте: 1. Создайте класс в вашем CSS файле, который будет задавать стили для блока кода. Например, вы можете назвать этот класс "code-block". ```html .code-block { font-size: 0.8em; /* Уменьшение размера шрифта */ line-height: 1.2; /* Уменьшение межстрочного интервала */ padding: 10px; /* Добавление отступов вокруг блока кода */ background-color: #f4f4f4; /* Цвет фона блока кода */ border: 1px solid #ccc; /* Обводка блока кода */ border-radius: 5px; /* Закругление углов блока кода */ } ``` 2. Примените этот класс к вашему блоку кода, используя атрибут class. ```html <pre lang="php" class="code-block">
```
Этот код позволит вам задать пропорциональное уменьшение для блока кода на вашем сайте. Вы можете настраивать значения свойств в CSS классе "code-block" в зависимости от ваших потребностей.