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

我正在使用象形图，我想显示用户拥有的所有象形图（网格列表和网格分幅）。问题是象形图的纵横比随象形图的变化而变化很大。 现在，我使用ng2 img max来调整象形图的大小（但保存比率）。我对CSS完全是个新手，但我尝试过一些东西（最大宽度：80%…玩这个东西…），但我认为理想的做法是在象形图中添加白色边框，以获得300px*300px（例如），然后轻松管理它们的显示。

我自己发现它很有用

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

---

现在最重要的部分是“grid template columns”属性

谢谢，我要看这段视频，看看它是否能解决问题！幸运的是，从我迄今为止的经验来看，无论单个元素的大小和纵横比如何，这都是获得一致、响应速度快的网格最可靠的方法。使用该网格，您不需要ng2 img max或任何其他形式的图像处理。

.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
}