帶有CSS網格的回應式圖片庫：如何將一個img拉伸到比實際更大？-有解無憂

我正在使用 CSS 網格制作回應式照片庫。一切都很好，直到您將瀏覽器寬度拉伸到 1240 像素以上。一張圖片應該占據四張圖片的空間，但是隨著瀏覽器變得非常大，圖片并沒有占據我想要的所有空間。我認為這是因為影像的原始大小是 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>```

uj5u.com熱心網友回復：

Per 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>

uj5u.com熱心網友回復：

它正在作業，只在下面檢查并且作業得很好。不需要更多

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/370675.html

標籤：html css 图片网格

上一篇：檔案不是從配方安裝的

下一篇：來自jpg/png的loadpixels錯誤處理