如何在此指定的网格空间内放置图像？

问题描述

我正在尝试将图像放入我指定的网格区域内，但我尝试的所有方法都没有给我想要的结果。

我希望图像填充空间而不裁剪图像。这可能吗？

body{
     width: 100vw;
     height: 100vh;
     color: black;
     margin: 0;
     padding: 0;
     font-family: poppins,sans-serif;
     }
.container{
     display: grid;
     grid-template-columns:repeat(5,1fr);
     grid-template-rows: 0.5fr 3fr 1fr;
     height: 100vh;
     }
.image{
     background-image: url(./assets/header_img.jpg);
     width: 100%;
     height: 100%;
     grid-area: 1/1/3/-1;
     object-fit: fill;
     background-repeat: no-repeat;
 }

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link your CSS stylesheet -->
    <link rel="stylesheet" href="index.css">
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="nav">nav</div>
    <div class="image">image</div>
    <div class="content">content</div>
    <div class="footer">footer</div>
  </div>

解决方法

您可以添加 background-size: 100% 100%;，它会完全填充它而不会对其进行裁剪。虽然它会拉伸图像以适应网格。

看这里：

body{
     width: 100vw;
     height: 100vh;
     color: black;
     margin: 0;
     padding: 0;
     font-family: poppins,sans-serif;
     }
.container{
     display: grid;
     grid-template-columns:repeat(5,1fr);
     grid-template-rows: 0.5fr 3fr 1fr;
     height: 100vh;
     }
.image{
     background-image: url(https://i.imgur.com/c3jpM7D.jpeg);
     background-size: 100% 100%;
     width: 100%;
     height: 100%;
     grid-area: 1/1/3/-1;
     object-fit: fill;
     background-repeat: no-repeat;
 }

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link your CSS stylesheet -->
    <link rel="stylesheet" href="index.css">
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="nav">nav</div>
    <div class="image">image</div>
    <div class="content">content</div>
    <div class="footer">footer</div>
  </div>