时间戳

首页 > 解决方案 > 调整大小并添加白色边框，以便在以角度上传图像时始终有相同的图片大小

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

问题描述

我正在使用象形图，我想显示用户拥有的所有象形图（网格列表和网格图块）。问题是象形图的纵横比根据象形图变化很大。 web app的截图：我们可以看到高比例的aspect可以隐藏文字和十字 现在，我使用 ng2-img-max 来调整象形图的大小（但保存比例）。我是 CSS 的新手，但我尝试了一些东西（最大宽度：80%.. 玩这些东西......）但我认为理想的做法是在象形图上添加白色边框以获得 300px *300px（例如）然后轻松管理它们的显示。

标签： htmlcssangular

解决方案

这是一个很棒的关于使用 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”属性。您可以在此处详细了解不同设置的作用。

推荐阅读