将图像拉伸到视口，保持纵横比答案

【问题标题】：Stretch image to viewport maintaining aspect ratio将图像拉伸到视口，保持纵横比
【发布时间】：2016-11-25 21:43:55
【问题描述】：

当前设置：

HTML：

<html>
    <head>
        <meta charset="UTF-8" />
        <title>Fullscreen image</title>
    </head>
    <body>
        <img src="https://cdn.discordapp.com/attachments/187205892989648897/251689220819648513/e448455be034a36f6e09b46e671bdfd1.png" alt="Loading..." id="slide" />
    </body>
</html>

CSS：

* {
  margin: 0;
  padding: 0;
  border: 0;
}

html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#slide {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

演示我想要的样子：https://jsfiddle.net/fu3bL2Lx/1/

当您拉伸和调整浏览器大小时，图像仍将保持垂直和水平居中，同时也适合视口，保持其纵横比。

这里的问题是，当我点击图片周围的空白处时，我仍然会触发绑定到img的alert

我很确定这可以使用 flexbox 来解决，如果不是仅使用常规未设置的 display 值，但我不是很了解它。

【问题讨论】：

请提供相关代码供我们在帖子中查看。

标签： css viewport aspect-ratio stretch

【解决方案1】：

这是因为您的图像仍然占据 100% 的视口。

  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;

由于object-fit 属性，您的实际图像保持正常，MDN：

object-fit CSS 属性指定被替换元素的内容应如何适应由其使用的高度和宽度建立的框。

包含意味着：

被替换的内容的大小保持其纵横比，同时适合元素的内容框：其具体对象大小被解析为对元素使用的宽度和高度的包含约束。

这就是您可以单击图像周围空白的原因。

【讨论】：

我在使用之前查了object-fit在MDN上做了什么，但我不知道有什么更好的，所以我暂时就用了。