我有一個CSS網格，重復列的流體布局最小最大(33.8雷姆，1fr)。

網格容器應用了最大寬度:140rem，因此它最多顯示4列。網格容器使用margin: 0 auto居中。

每個網格單元保存一個& quot卡片& quot下面有一幅圖像和一些文字。

我的問題是，我如何讓每張圖片使用一個接近& quot理想& quot尺寸？

我的問題是，雖然我已經將:root字體大小設置為62.5%，因此1rem(通常)等于10px，但我仍然不知道每個網格列到底有多寬。

對于大多數(shù)手機，會顯示一個單列。這可能小于33.8雷姆，但可能會更大(1fr)，可能略低于2 x 33.8rem雷姆= 66.7雷姆。

以下& ltimg & gt標簽工作得相當好:

<img alt=""
  src="https://placehold.co/208x130.png"
  sizes="(max-width: 715px) 100vw,
         (max-width: 1069px) 50vw,
         (max-width: 1399px) 33vw,
         25vw"
  srcset="https://placehold.co/320x200.png 320w,
          https://placehold.co/560x350.png 560w,
          https://placehold.co/640x400.png 640w,
          https://placehold.co/704x440.png 704w,
          https://placehold.co/800x500.png 800w,
          https://placehold.co/960x600.png 960w,
          https://placehold.co/1280x800.png 1280w"
/>

大小屬性使用2列、3列和4列下的斷點，并使用vw百分比...因此，對于4列布局，2列以下的任何內容都使用100vw，以25vw結束。(我知道我可以使用calc()從100vw中減去我的填充等；為了簡單起見，這里不做！)

這似乎工作得很好，將選擇正確的圖像大小，即使在設備與DPR & gt；1(所以大部分移動設備)。

然而，當我使用DPR為1的桌面類型分辨率(比如1920x1080)時，它將使用4列布局。此時，它決定25vw是它應該使用的圖像大小，在這種情況下，我知道它應該選擇320w圖像，因為4列布局受到網格容器最大寬度的限制。但是它沒有——它選擇了一個更大的圖像！這(我相信)是因為1920年的25% = 480像素(我假設一個最大化的瀏覽器窗口)，但網格是居中的，如果少于4列，這是無關緊要的，一旦網格達到其最大寬度，居中工作，所以圖像可能會更小。

我可以更改大小屬性，使默認值為320像素，但這樣它會請求320像素的圖像，即使在DPR較高的設備上也不行。

sizes="(max-width: 715px) 100vw,
         (max-width: 1069px) 50vw,
         (max-width: 1399px) 33vw,
         320px"

有什么方法可以解決這個問題嗎？

CSS的主要位在這里(這些是在CSS復位之后):

:root { font-size: 62.5%; }
body  { font-size: 1.6rem; }
main  { margin: 0 auto; }
.grid {
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax(33.8rem, 1fr) );
  gap: 1.6rem;
}
.card {
  background-color: #f9f9f9;
  padding: 0.8rem;
  border: 1px solid #bacdd8;
}
.card img {
  width: 100%;
}