масштабирование изображения внутри grid сетки css

Question

масштабирование изображения внутри grid сетки css

Рейтинг: 1Ответов: 1Опубликовано: 11.04.2023

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

С позиционирование ячеек проблем не возникло, сделал все используя сетку 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;
}

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

css img grid

Источник: Stack Overflow на русском

Answer 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>

масштабирование изображения внутри grid сетки css

Ответы