如何将图像放入指定的网格 space？

Question

我正在尝试使图像适合我指定的网格区域，但我尝试过的所有方法都没有给我想要的结果。

我希望图像在不裁剪图像的情况下填充 space。这可能吗？

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>

Answer 1

您可以添加 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>

如何将图像放入指定的网格 space？

How do I fit an image inside of this specified grid space?

css

image

image-scaling