Question

我有以下使用网格显示内容的HTML。使用Safari（iOS）和Chrome 66，可以将图像渲染到屏幕中央。升级到Chrome 67后，它不再显示任何内容。当我更改屏幕方向时，图像会出现并保持不变，直到我重新加载页面。

任何人都知道这是否是Chrome中的错误？

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

.wrapper {
  height: 100%;
  width: 100%;
  align-items: center;

  display: grid;
  grid-auto-rows: 1fr;
  justify-content: center;
}

.wrapper img {
   max-height: 100%;
   max-width: 100%;
}

<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>

 <body>
  <div class="wrapper">
   <img src="https://testimages.org/img/testimages_screenshot.jpg" alt="" />
  </div>
 </body>
</html>

此代码段应显示测试图片，但不再使用Chrome 67执行此操作。如果您使用其他浏览器（或Chrome＆lt; 67）运行此代码段，则可以正常使用。

使用网格时出现Chrome 67布局问题

0 个答案: