色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

在純CSS中為可變數量的圖像創建一個響應性和統一的網格布局，所有圖塊都適合最大元素的大小

CSS
黃文隆1年前9瀏覽0評論

[編輯:序言]

不管你的答案是什么性質，請用可靠來源的技術參考來增強你的論點。提前感謝。

[問題]

我試圖為具有可變數量元素的圖像創建一個純CSS響應網格布局，所有元素都以其原始分辨率顯示，所有元素都以其單元格為中心。最大的圖像必須是參考，它的單元格必須完全適合它，并且網格必須響應可用的空間(即僅在必要時創建行)。

到目前為止，這個網格對我來說還可以，但是用我的方法，如果我們想讓它成為參考(周圍沒有空間)，我們必須知道最大的正方形圖像的確切大小。

也許用純CSS是無法實現這一點的。我不會，我希望你能給我一些提示。

.gallery {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(auto, 100px));
  justify-items: center;
  align-items: center;
}

.gallery img {
  width: auto;
  height: auto;
  object-fit: scale-down;
  object-position: center center;
}

<div class="gallery">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
</div>

不幸的是，僅僅用css是不可能解決你的問題的。如前所述，自動填充需要固定的大小。 因此，我建議使用最少的javascript代碼，并設置一個css變量。 在下面的示例中，還考慮了防止& quot跳躍& quot計算圖像寬度后:

window.onload = () => {
  /* Looking for the widest image. */
  const largestImgWidth = [...document.querySelectorAll('.gallery img')].reduce( (prev, current) => prev = current.offsetWidth > prev ? current.offsetWidth : prev, 0);
  /* Set largestImgWidth in the css variable */
  document.querySelector('.gallery').style.setProperty('--largest-img-width', largestImgWidth + 'px')
}

.gallery {
  /* Initial col width */
  --largest-img-width: 0;
  display: grid;
  place-items: center;
  grid-gap: 1rem;
  grid-template-columns: repeat( auto-fill, minmax( var(--largest-img-width), 1fr) );
  /* Hide until the grid is formed */
  opacity: 0;
}

.gallery[style] {
  /* Show it after forming the grid */
  opacity: 1;
}

<div class="gallery">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
</div>

片段僅稍好，但仍然是100像素

.gallery {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  justify-items: center;
  align-items: center;
}

.gallery img {
  width: auto;
  height: auto;
}

<div class="gallery">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
</div>

假設你想保持所有的圖像和網格一樣大。

.gallery {
            display: grid;
              grid-gap: 1rem;
            grid-template-columns: repeat(auto-fill, minmax(auto, 100px));
            justify-items: center;
            align-items: center;
        }
            
        .gallery img {
            width: 100%; /* changed to 100% from auto */
            height: 100%; /* changed to 100% from auto */
            object-fit: fill; /* changed to fill from scale-down */
            object-position: center center;
        }

<div class="gallery">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
</div>

用javascript回答你最后一個注釋設置css變量，可以直接把值放在樣式里。

const searchMaxWidth = () => {
  let mw = 0;
  document.querySelectorAll('.gallery img').forEach(el => {
    if (el.getBoundingClientRect().width > mw) mw = el.getBoundingClientRect().width;
  })
  console.log(mw);
  document.querySelector('.gallery').style.gridTemplateColumns = 'repeat(auto-fill, minmax(' + mw + 'px, 1fr))';
}
window.addEventListener('load', searchMaxWidth);

.gallery {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  justify-items: center;
  align-items: center;
}

.gallery img {
  width: auto;
  height: auto;
}

<div class="gallery">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
  <img src="https://picsum.photos/25">
  <img src="https://picsum.photos/50">
  <img src="https://picsum.photos/75">
  <img src="https://picsum.photos/100">
</div>