Question

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

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

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

不起作用。如果照片小于容器，则会将纵横比锁定为原始宽度（即宽度不会达到100％）。如果照片宽度大于容器，则高度保持原始高度。

Answer 1

从图片中移除height并为您的容器height: auto;。检查代码段。

＆＃13;

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

＆＃13;

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

＆＃13;