首页 文章

保持纵横比为宽度@ 100％

提问于
浏览 次
1

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

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

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

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

html css angular

1 回答

  • 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>
    回复于

相关问题