При верстке сайта возникла проблема с реализацией сетки контента (выделил красным эту область)
С позиционирование ячеек проблем не возникло, сделал все используя сетку 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;
}
Попытка 5.
Попробовал по совету всезнающих использовать свойство contain с разными настрйоками. Картинка очевидно не масштабируется на весь блок, а просто подгоняется под меньшую ось.
Попытки 6-10.
Стал перебирать все варианты предложенные чатом gpt, ни один из них не подошел.
Самый лучший вариант оказался следующий:
В html перенести картинку из сss свойства background-img
в css добавить заполнение блока
#main_content > * {
object-fit: fill;
max-height: 100%;
background-position: center center;
}
Но даже в этой ситуации появляется отступ снизу! Пара пикселей в разнице картинке и блока(это не тень).