调整大小并添加白色边框，以便在以角度上传图像时始终具有相同的图片大小

Question

我正在使用象形图，我想显示用户拥有的所有象形图（网格列表和网格图块）。问题在于，象形图的纵横比根据象形图变化很大。 现在，我使用ng2-img-max来调整象形图的大小（但保存比率）。我是CSS的新手，但是我尝试了一些事情（最大宽度：80％。。。。。）但是我认为理想的做法是在象形图上添加白色边框，以使像素达到300像素*例如300px，然后轻松管理其显示。

Answer 1

This is a great tutorial on responsive layouts with CSS grid我发现自己有用。

<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`属性。 You can read more about what different settings do here.