Question

当前设置：

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/

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

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

我很确定这可以通过flexbox解决，如果没有常规的未设置display值，但我不是很了解它。

Answer 1

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

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

由于object-fit属性，MDN：

，您的实际图像保持正常

object-fit CSS属性指定如何将替换元素的内容拟合到由其使用的高度和宽度建立的框中。

包含意味着：

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

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

拉伸图像到视口保持纵横比

1 个答案: