html - 保持宽度的纵横比@ 100%

Question

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

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

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

确实不行。如果照片小于容器，它会将宽高比锁定为原始宽度(即宽度不会达到 100%)。如果照片宽度大于容器，则高度会保持原始高度。

Answer 1

从图像中删除 height 并为您的容器提供 height: auto;。检查代码段。

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

img {
  width: 100%;
}

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