Контроль размера изображений во вложенных сетках - PullRequest
Новая
       7

Контроль размера изображений во вложенных сетках

0 голосов
/ 28 февраля 2020

Я пытаюсь войти в систему компоновки сетки, и я действительно борюсь с размерами изображений внутри контейнеров сетки. Я просто хочу создать простую страницу с навигационной панелью. Панель навигации должна содержать lo go, значки и текст. Он разделен на три части:

  • Левая часть, содержащая lo go (выровнена по левой стороне)
  • Центральная часть, содержащая заголовок ( выровненный по центру)
  • Правая часть, содержащая изображение и текст (выровненный по правой стороне)

Поскольку я хочу по возможности работать с сеткой, я планировал Структура выглядит следующим образом: https://codepen.io/Nicolas_V/pen/QWbvxoW

HTML: 

<div class="site">
  <div class="navbar">
    <div class="navbar__area--left">
      <div>Logo</div>
    </div>
    <div class="navbar__area--center">
      <div>Admin Page</div>
    </div>
    <div class="navbar__area--right">
      <div>Text</div>
      <div>Image</div>
    </div>  
  </div>
  <div class="content">Content</div>
</div>

CSS: 

html, body{
  margin: 0;
  padding: 0;
}
.site{
  display: grid;
  grid-template-rows: 1fr 9fr;
  height: 100vh;
}
.navbar{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  background-color: green;
}
.navbar > div > *{
  display: inline;
  margin-right: 2rem;
  margin-left: 2rem;
}

.navbar__area--left{
  text-align: left; 
}
.navbar__area--center{
  text-align: center;
}
.navbar__area--right{
  text-align: right;
}

Я создал три контейнера для каждой части, чтобы я мог выровнять их содержимое отдельно. Пока все хорошо.

Теперь я добавил тестовое изображение в левую часть и ожидал, что оно будет соответствовать высоте контейнера. Но это не так. https://codepen.io/Nicolas_V/pen/XWbRYLR

Чего я не понимаю, так это того, что если Я УДАЛУ вмещающий контейнер с левой стороны, изображение идеально соответствует высоте панели навигации, как и ожидалось ранее.

https://codepen.io/Nicolas_V/pen/rNVmrNm

Но мне нужен этот контейнер, потому что для правой части я хочу, чтобы в контейнере было несколько элементов, все выровнены по правой стороне.

Я знаю, что могу установить фиксированную высоту для изображений и так далее, но я хочу покопаться в сетке и уверен, что есть способ решить мою проблему.

...