如何调整图像大小以使其始终适合所有屏幕尺寸（例如Bootstrap 4）？

Question

我试图使图像居中放置在屏幕上并实际适合屏幕，但是我遇到了图像高度变大的问题（因此，在平板电脑上方的屏幕尺寸上，用户必须滚动以查看整个图像。

这是我要完成的工作：

预期结果在第一行。不管屏幕大小是多少，图像都应始终居中对齐，并在底部放一个小缺口。 底行显示了我的结果。只要浏览器高度足够高，图像就可以从手机到平板电脑的大小居中。扩大浏览器的比例会放大图像，使图像的一部分在外面。

我正在使用Bootstrap。这就是我所做的：

<div class="container py-3">
    <div class="row">
        <div class="col-sm-12">
            <img src="/images/gallery/inst01.jpg" class="img-fluid d-block rounded">
            <i class="fas fa-caret-square-left fa-2x "></i>
        </div>             
    </div>
</div>

我感觉到容器高度是个问题，或者图像使容器变得太大，但是我不知道如何使容器保持小于浏览器窗口的大小（或至少等于容器的大小），或者如何缩小图像以使其停留在浏览器底部上方。

有人可以帮忙吗？ 谢谢

Answer 1

使用CSS

img {
height: 100vh;
width: 100vh;
object-fit: cover;
}

，并相应地设置父级宽度和高度

Answer 2

这是可能的Bootstrap4解决方案。我发现这套规则很好用（请检查浏览器支持：https://caniuse.com/#search=object-fit）：

public static bool IsPointInPolygon(List<GeoCoordinate> poly, GeoCoordinate point)
{
    int i, j;
    bool c = false;
    for (i = 0, j = poly.Count - 1; i < poly.Count; j = i++)
    {
        if ((((poly[i].Latitude <= point.Latitude) && (point.Latitude < poly[j].Latitude))
                || ((poly[j].Latitude <= point.Latitude) && (point.Latitude < poly[i].Latitude)))
                && (point.Longitude < (poly[j].Longitude - poly[i].Longitude) * (point.Latitude - poly[i].Latitude)
                    / (poly[j].Latitude - poly[i].Latitude) + poly[i].Longitude))
            c = !c;
    }

    return c;
}

这是它的工作方式：

img {
    height: calc(100vh - your-last-item-height);
    max-width:100%;
    object-fit: cover;
}

.col {
  height:100vh;
}

img{
  max-width: 100%;
  object-fit: cover;
  height: calc(100vh - 35px);
}

.item:last-child {
  max-height:35px; /* set here your last-item height */
}