1

При верстке сайта возникла проблема с реализацией сетки контента (выделил красным эту область)

Макет сайта

С позиционирование ячеек проблем не возникло, сделал все используя сетку grid (мне показалось это самым простым вариантом). Созданная сетка

Вот код сетки если понадобиться для лучшего понимания:

#main_content {
    height: 87%;
    width: 100%;
    padding: 4%;
    display: grid;
    grid-template-columns: 1fr 1.7fr 1.35fr;
    grid-template-rows: 1.25fr 1fr 2fr;
    gap: 4% 4%;
    grid-auto-flow: row;
    
    grid-template-areas:
        "progress progress ntf"
        "lessons projects ntf"
        "msg msg records"
    
    }
<section id="main_page">
    <div id="main_content">
        <div id="progress"></div>
        <div id="lessons"></div>
        <div id="projects"></div>
        <div id="msg"></div>
        <div id="ntf"></div>
        <div id="records"></div>
    </div>
</section>

С этого момента начинаются проблемы. Так как у элементов которые нужно поместить в сетку сложная форма, мной было изначально принято решение экспортировать с figma их как svg-файлы и подгружать их фоном блока. Но как я не пытался это сделать - они не масштабируются как надо. То вылезают за рамки, то сжимаются по какой-то оси, то просто уменьшаются...

Далее идёт моя история мучений, возможно, будет полезно или забавно =)

Попытка 1. Задал картинке параметры высоты и ширины 100% (не уверен что нужно было указывать min и max, в любом случае на результат они не повлияли) картинка уходит за границы блока

#main_content > *  {
   width: 100%;
   height: 100%;
   min-width: 100%;
   min-height: 100%;
   max-width: 100%;
   max-height: 100%;
}
#lessons {
   background-image: url('/static/img/form_lessons.svg');
   grid-area: lessons;
}

Добавление background-position ситуацию никак не улучшает, т.к. svg-шка все также уходит за края.

Растягивание по высоте и ширине

Попытка 2. Регулирование по высоте с автоподбором ширины, как и ожидалось создало ненужное сжатие Такая же ситуация при выравнивание 100% auto, только сжатие идет по вертикали. Это не подходит.

#main_content > *  {
    background-size: auto 100%;
    background-position: center center;
}

Лишние сжатие блока

Попытка 3. 2 auto - результат без комментариев.

Ужас

Попытка 4. Решил попробовать cover, который в аналогичных ситуациях всегда всем помогал. Что-то пошло не по плану... p.s. max-height на результат опять никак не влияет

  #main_content > *  {
    background-size: cover;
    max-height: 100%;
    background-position: center center;
  } 

cover Попытка 5. Попробовал по совету всезнающих использовать свойство contain с разными настрйоками. Картинка очевидно не масштабируется на весь блок, а просто подгоняется под меньшую ось. Попытки 6-10. Стал перебирать все варианты предложенные чатом gpt, ни один из них не подошел. Самый лучший вариант оказался следующий: В html перенести картинку из сss свойства background-img в css добавить заполнение блока

#main_content > *  {
    object-fit: fill;
    max-height: 100%;
    background-position: center center;
}

Но даже в этой ситуации появляется отступ снизу! Пара пикселей в разнице картинке и блока(это не тень).

3
  • Может стоит картинкой делать только "шапку"? 11 апр в 12:52
  • Если не получится с фото, то буду пробовать только шапку. Но скорее всего и с ней будут те же проблемы. 11 апр в 18:12
  • Не будет проблем, бордеры и радиусы css-ом, шапку background: black и маленький кусочек справа можно картинкой в position:absolute впилить к шапке. 12 апр в 6:21

1 ответ 1

0

Если что вместо зелёного квадратика вам нужно изображение угла загрузить.
Только заметил, что шапка это у вас Табы, хотя эти же стили можно и к ним применить.

div {
  display: block;
  box-sizing: border-box;
}
.block {
  width: 300px;
}
.content {
  padding: 10px 5px 5px;
  min-height: 200px;
  border: 1px solid black;
  border-radius: 0 0 20px 20px;
  box-shadow: 1px 2px 6px rgba(0,0,0,0.5);
}
.shapka {
  color: white;
  position: relative;
  padding-right: 40px;
}
.shapka span {
  display: block;
  padding: 10px 0 10px 5px;
  background: black;
  box-sizing: border-box;
  border-radius: 10px 0 0 0;
}
.shapka:before {
  content: '';
  display: block;
  width: 40px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background: green;
}
<div class="block">
  <div class="shapka">
    <span>Текст шапки</span>
  </div>
  <div class="content">
    Lorem Ipsum dolor si amet например
  </div>
</div>

1
  • Идея понятна, буду реализовывать. Спасибо) 12 апр в 12:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.