我有一個(gè)CSS網(wǎng)格，重復(fù)列的流體布局最小最大(33.8雷姆，1fr)。

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

每個(gè)網(wǎng)格單元保存一個(gè)& quot卡片& quot下面有一幅圖像和一些文字。

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

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

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

以下& ltimg & gt標(biāo)簽工作得相當(dāng)好:

<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列下的斷點(diǎn)，并使用vw百分比...因此，對(duì)于4列布局，2列以下的任何內(nèi)容都使用100vw，以25vw結(jié)束。(我知道我可以使用calc()從100vw中減去我的填充等；為了簡(jiǎn)單起見，這里不做！)

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

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

我可以更改大小屬性，使默認(rèn)值為320像素，但這樣它會(huì)請(qǐng)求320像素的圖像，即使在DPR較高的設(shè)備上也不行。

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

有什么方法可以解決這個(gè)問(wèn)題嗎？

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

: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%;
}