CSS：图像100％高度 - 自动宽度 - 由视口约束

Question

我需要一个图像拉伸到其父级的100％高度并具有自动高度 - 但我不希望宽度大于视口并希望图像保持其比例。

此刻，我有以下几点 -

img{
    width:auto;
    height:100%;
    max-height:none;
    max-width:auto!important;
    display:inline-block;
    margin-left: auto!important;
    margin-right: auto!important;
}

Answer 1

如果我理解正确，您可以使用object-fit:cover

＆＃13;

＆＃13;

.parent {
  height: 500px;
  border: red solid;
}
img {
  width:100%;
  height: 100%;
  display: block;
  object-fit:cover
}

＆＃13;

<div class="parent">
  <img src="//lorempixel.com/1600/900" />
</div>

＆＃13;

＆＃13;

＆＃13;