Измените размер и добавьте белые границы, чтобы при загрузке изображения в угловом формате всегда был один и тот же размер

Question

Я работаю с пиктограммами, я хочу отобразить все пиктограммы, которые есть у пользователя (список сетки и плитки сетки).Проблема в том, что соотношение сторон пиктограмм сильно меняется в соответствии с пиктограммой. Сейчас я использую ng2-img-max, чтобы изменить размер (но сохранить соотношение) пиктограмм.Я полностью новичок в CSS, но я пробовал кое-что (max-width: 80% .. Играя с этим материалом ...) Но я думаю, что идеальным было бы добавить белые рамки к пиктограммам, чтобы получить 300px* 300px (например), а затем с легкостью управляйте их отображением.

Answer 1

Это отличный учебник по адаптивным макетам с сеткой CSS , который я сам нашел полезным.

<div class="grid-container" fxFill>

  <div>
// WHATEVER YOU WANT INSIDE HERE -- TILE 1
  </div>

  <div>
// WHATEVER YOU WANT INSIDE HERE -- TILE 1
  </div>

  <div>
// WHATEVER YOU WANT INSIDE HERE -- TILE 1
  </div>

</div>

Теперь SCSS для этого:

.grid-container {
  display: grid; // displays in grid
  width: 100%; // useful to have the fill the container
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); 
  padding: 0px; // personal preference
  grid-column-gap: 30px; // personal preference
}

Теперь наиболее важной частью этого является свойство 'grid-template-columns`. Подробнее о различных настройках можно прочитать здесь.