保持宽度的纵横比 @ 100%答案

【问题标题】：Maintain Aspect ratio for width @ 100%保持宽度的纵横比 @ 100%
【发布时间】：2018-06-21 12:53:17
【问题描述】：

在 Angular 2 中，我有一个位于容器内的 img 集。我希望图像是容器宽度的 100%，但高度与宽度的纵横比相同。

例如，如果我有 500px x 250px (WxH) 的图像。容器为 1000px。当我将图像设置为容器宽度的 100% 时，高度将为 500 像素。这可能吗？到目前为止，我已经完成了：

<div>
      <img style="max-width: 100%;width:auto; height:auto;" [src]="mediaURL" />
</div>

真的没用。如果照片小于容器，它会将纵横比锁定为原始宽度（即宽度不会达到 100%）。如果照片宽度大于容器高度，则高度将保持在原始高度。

【问题讨论】：

【解决方案1】：

从图像中删除height 并为您的容器提供height: auto;。检查sn-p。

div{
  width: 1000px;
  height: auto;
  background: black;
}

img {
  width: 100%;
}

<div>
      <img  src="https://dummyimage.com/500x250/918c91/0011ff.jpg" />
</div>

【讨论】：