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

【问题标题】：How to resize an image to always fit all screen sizes (eg. Bootstrap 4)?如何调整图像大小以始终适合所有屏幕尺寸（例如 Bootstrap 4）？
【发布时间】：2019-05-22 12:38:54
【问题描述】：

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

这就是我想要完成的：

预期结果位于第一行。无论屏幕尺寸是多少，图像都应始终居中，底部有一个小间隙。底行显示了我的结果。只要浏览器高度足够高，图像就会从手机到平板电脑大小居中。让浏览器变宽会使图像缩放太多，以至于部分图像在外面。

我正在使用引导程序。这就是我所做的：

<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>

我觉得容器高度是问题，或者图像推动容器变得太大，但我不知道如何保持容器小于浏览器窗口（或至少一样大）或如何缩小图像，使其保持在浏览器底部上方。

有人可以帮忙吗？谢谢

【问题讨论】：

标签： html css image bootstrap-4 scale

【解决方案1】：

使用css

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

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

【讨论】：

开箱即用这不起作用。父级是容器还是主体？我试图将容器设置为：min-height: 100%; height: 100%;。但这也不起作用。
一开始我以为可能是因为我加了一个导航栏，但是窗口越大，图像就越大，越在底部之外。

【解决方案2】：

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

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 */
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    
<div class="container">
    <div class="row">
      <div class="col d-flex justify-content-center">
        <div class="d-flex flex-column">
          <div class="item"><img src="https://picsum.photos/500/500" class="rounded"></div>
          <div class="item"><i class="fas fa-caret-square-left fa-2x"></i></div>
        </div>             
    </div>
  </div>
</div>

【讨论】：