如何使用ng-repeat和css创建灵活的图像缩略图网格？

Question

我有一个包含图像uri（imagesToDisplay）的对象数组（image.tempURL）。我想创建一个标准的缩略图网格，就像你在手机库中的iPhone上一样，使用ng-repeat和灵活的观察端口宽度。

缩略图应裁剪并使图像居中，使其适合方形的扇形。

我尝试了以下内容，但它没有用......

HTML

<i ng-repeat="image in imagesToDisplay">
<img class="center-cropped" ng-src="{{image.tempURL}}" alt="Image">
</i>

CSS

.center-cropped {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 100px;
  width: 100px;
}

Answer 1

知道了。基本上，用

替换object-fit

object-fit: cover;

对象拟合的四个可能值为follows：

• 包含：如果您在替换后设置了明确的高度和宽度 element，object-fit：contains会导致内容（例如图像） 要调整大小以使其完全显示内在方面 比率保留，但仍然适合为设定的尺寸 元件。
• fill：使元素的内容完全展开 填充为它设置的尺寸，即使这确实打破了它的内在 纵横比。
• 封面：保留内在的长宽比 元素内容，但改变宽度和高度使内容 完全覆盖元素。两者中较小的一个适合 元素完全，并且更大的元素溢出。
• none：the 内容完全忽略了元素上设置的任何高度或重量， 并且只使用被替换元素的内在维度。