具有 CSS 网格的响应式图片库：如何将一个 img 拉伸到比实际更大？

Question

我正在使用 CSS 网格制作响应式照片库。在将浏览器宽度拉伸到 1240px 以上之前，一切都很好。一张图片应该占据四张图片的 space，但随着浏览器变得非常大，图片并没有占据我想要的所有 space。我认为这是因为图像的原始尺寸是 800x600。任何帮助将不胜感激。我正在 CodePen 上做这个项目，如果你想看的话：https://codepen.io/Zakkku/pen/JjrPPGo

<style>
.gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  
  
  
}




img {
  max-width: 100%;
  height: auto;
  width: auto;
  object-fit: fill;
}

@media screen and (min-width: 768px) {
  
  .gallery {
    display: grid;
    grid-template-columns: auto auto;
    
  }
  
  
}

@media screen and (min-width: 1024px) {
  
  .gallery {
    display: grid;
    grid-template-columns: auto auto auto;
    
  }
  .noods {
    grid-area: 1 / 2 / 3 / 4;

    object-fit: fill; 
  }
}
</style>
  <body>
    <div class="gallery">
      <div class="pic">
        <img src="https://images.unsplash.com/photo-1477925518023-22b33cbd802c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc1MzY&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Figs" width="800" height="600">
      </div>
      <div class="pic noods"><img src="https://images.unsplash.com/photo-1462618521524-07d259ab774a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc2NTU&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Noodles"></div>
      <div class="pic"><img src="https://images.unsplash.com/44/Y51aFguqRcGTgsYRYBXV_20140104_085932.jpg?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc3NDA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Razzberries"></div>
      <div class="pic"><img src="https://images.unsplash.com/24/Tea-Time.png?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc4NTc&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Green Tea"></div>
      <div class="pic"><img src="https://images.unsplash.com/photo-1471193945509-9ad0617afabf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0NzkwMg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Veggies"></div>
      <div class="pic"><img src="https://images.unsplash.com/photo-1433155805822-ffc337821a5b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk0Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Brilliant Buffet"></div>
      <div class="pic"><img src="https://images.unsplash.com/photo-1470162656305-6f429ba817bf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk4Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="More Green Tea"></div>
      <div class="pic"><img src="https://images.unsplash.com/photo-1443131307017-4097c8ac7763?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODI3Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="lemonade"></div>
      <div class="pic"><img src="https://images.unsplash.com/photo-1474152042542-1e794677a34b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODM1NA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Grapes"></div>
    </div>
  </body>
</html>```

Answer 1

根据 Sujan Sundareswaran 这是一个工作示例。

    .gallery {
      display: flex;
      flex-direction: column;
      gap: 10px;

    }

    img {
      max-width: 100%;
      height: auto;
      width: auto;
      object-fit: fill;
    }

    @media screen and (min-width: 768px) {

      .gallery {
        display: grid;
        grid-template-columns: auto auto;

      }

    }

    @media screen and (min-width: 1024px) {

      .gallery {
        display: grid;
        grid-template-columns: auto auto auto;
      }

      .noods {
        grid-area: 1 / 2 / 3 / 4;

        object-fit: fill;
        background-image: url("https://images.unsplash.com/photo-1462618521524-07d259ab774a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc2NTU&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800");
        background-size: cover;
      }
    }

<!DOCTYPE html>
<html>


<head>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

</head>

<body>

  <div class="gallery">
    <div class="pic">
      <img
        src="https://images.unsplash.com/photo-1477925518023-22b33cbd802c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc1MzY&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
        alt="Figs" width="800" height="600">
    </div>
    <div class="pic noods"></div>
    <div class="pic"><img
        src="https://images.unsplash.com/44/Y51aFguqRcGTgsYRYBXV_20140104_085932.jpg?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc3NDA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
        alt="Razzberries"></div>
    <div class="pic"><img
        src="https://images.unsplash.com/24/Tea-Time.png?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc4NTc&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
        alt="Green Tea"></div>
    <div class="pic"><img
        src="https://images.unsplash.com/photo-1471193945509-9ad0617afabf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0NzkwMg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
        alt="Veggies"></div>
    <div class="pic"><img
        src="https://images.unsplash.com/photo-1433155805822-ffc337821a5b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk0Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
        alt="Brilliant Buffet"></div>
    <div class="pic"><img
        src="https://images.unsplash.com/photo-1470162656305-6f429ba817bf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk4Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
        alt="More Green Tea"></div>
    <div class="pic"><img
        src="https://images.unsplash.com/photo-1443131307017-4097c8ac7763?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODI3Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
        alt="lemonade"></div>
    <div class="pic"><img
        src="https://images.unsplash.com/photo-1474152042542-1e794677a34b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODM1NA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
        alt="Grapes"></div>
  </div>
</body>

</html>

Answer 2

它正在运行，只需在下面查看并且运行良好。不需要更多

 img {
        max-width: 100%;
        height: auto;
        width: 100%;
        object-fit: fill;
    }

具有 CSS 网格的响应式图片库：如何将一个 img 拉伸到比实际更大？

Responsive image gallery with CSS grid: How can I stretch one img to be bigger than it actually is?

html

css

grid

image