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

Question

我有一组包含图像 uri (image.tempURL) 的对象 (imagesToDisplay)。我想创建一个标准的缩略图网格，就像您在手机库中的 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;

object-fit 的四个可能值是 follows :

• 包含:如果您已在替换的内容上设置明确的高度和宽度element, object-fit:contain 将导致内容(例如图像)调整大小，使其以内在的外观完全显示比率保留，但仍适合为元素。
• fill:使元素的内容完全展开填充为它设置的尺寸，即使这确实破坏了它的内在纵横比。
• 封面:保留内在的纵横比元素内容，但会改变宽度和高度，以便内容完全覆盖元素。两者中较小的一个适合元素完全一致，较大的溢出元素。
• 无:内容完全忽略元素上设置的任何高度或重量，并且只使用被替换元素的固有尺寸。