时间戳

首页 > 解决方案 > 无论纵横比如何，强制图像填充 Angular 中的 Div

css - 无论纵横比如何，强制图像填充 Angular 中的 Div

问题描述

我想显示存储在服务器上的一堆图像。这些图像取自用户的手机，尺寸和纵横比未知。

我只想让图像完全填充 DIV，同时保持其纵横比。如果图像宽于高，我希望图像缩放，以便高度为 Div 的 100%，并且边会被剪掉。同样，如果图像比宽高，我希望图像按比例放大/缩小，因此宽度是 Div 的 100%

希望这能解释 在此处输入图像描述

我认为这将是微不足道的，但我在这里。我可以使图像适合高或宽，但不能取决于纵横比。我尝试了几种不同的方法，我不知所措。

我在这里有一个 Stackblitz 示例。

我有一个 2x2 网格，我想让图像填充这些网格。有些图像需要旋转。我不确定为什么它们需要在我的计算机上看起来正常。我有一个硬编码的标志来强制对某些图像进行旋转，但旋转似乎进一步搞砸了 css。

CSS：

.img-container {
  /* height: 150px; */
  width: 100%;
}

.img-container img {
  height: 100%;
  /* height: -webkit-fill-available; */
  width: 100%;
  object-fit: cover;
}

HTML：

<div class="showBorder img-container">
  <img #image class="container-img-objfit2" 
        [ngClass]="{rotateLeft: rotate}" 
        [src]="imageURL" />  

</div>

无论纵横比如何，如何填充这些 DIV？

我可以在角度内做任何这些吗？我试图获取图像大小并查看是否可以设置处理旋转的自定义类，但这似乎也不起作用。我所有照片的尺寸都是相同的。所以没办法区分哪些图片需要旋转。

还是我对这一切都错了？最终，我认为我将有一个过程来缩放和裁剪服务器上的图像，以便为客户端应用程序做好准备。

更新： 此示例尝试在背景中设置图像并使用 :before 选择器来旋转图像。它不能完全工作，因为我无法将图像动态更改为其他图像。

标签： cssangular

解决方案

您可以将图像设置为 div 的背景图像并将其大小设置为覆盖。所以只需删除 img 标签并仅保留您的 div 标签

<div class="showBorder img-container" [style.backgroundImage]="'url(' + imageURL + ' )'">


</div>

在 CSS 中，您必须指定高度和大小

  .img-container {
   height: 150px;
   width: 100%;
   background-size:cover;
  }

推荐阅读