1

我想将浏览器窗口拆分为 4 个相同大小的区域并将图像居中。
它在 Chrome 中运行良好，但 Firefox 使用的是全宽，因此会出现滚动条，并且这些区域不适合屏幕。

我该怎么做才能让它在 Firefox 中运行？

这是我的代码：

<!doctype html>
<html>
   <style>
      body {
          display: grid;
          height: 100vh;   
          margin: 0; 
          grid-template-columns: auto auto;
          grid-template-rows: auto auto;          
      }
      div {
          display: grid; 
          margin: 10px; 
          border: 10px solid red;
      }
      img {  
          object-fit: contain; 
          height: 100%;
          width: 100%;
      }
   </style>
   <body>
      <div>        
         <img src="https://www.amaten.it/wp-content/uploads/2017/11/baum-amaten-herbst.jpg">
      </div>
      <div>        
         <img src="https://www.amaten.it/wp-content/uploads/2017/11/baum-amaten-herbst.jpg">
      </div>
      <div>        
         <img src="https://www.amaten.it/wp-content/uploads/2017/11/baum-amaten-herbst.jpg">
      </div>
      <div>        
         <img src="https://www.amaten.it/wp-content/uploads/2017/11/baum-amaten-herbst.jpg">
      </div>
   </body>
</html>

铬合金：

铬合金

火狐：

火狐

4

0 回答 0