Question

我试图让响应式图像网格显示从服务器加载的图像。以下是我使用的HTML和CSS的代码片段：

HTML

<div class="wrap" *ngIf="Display('images')">
    <div class="imgwrap" *ngFor="let item of items$|async">
        <img src="{{item.link}}">
    </div>
</div>

CSS

.wrap {
  max-width: 980px;
  margin: auto;
}

.imgwrap {
  position: relative;
  width: 20%;
  padding: 20% 0 0;
  overflow: hidden;
  margin: 10px;
  display: inline-block;
}

.imgwrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translateX(-50%) translateY(-50%);
}

他们目前创建的图像具有相同的高度和宽度，因此正在裁剪一些图像。

我试图实现类似于Google图片的布局。图像应该具有相同的高度，但宽度应该是自然的（不会改变）。如果有人能指导我完成所需的布局，那将是很棒的。：）

如何将图像对齐到相同高度但正常宽度？

0 个答案: