Question

我正在尝试使用CSS网格布局来显示带有响应图像的一些内容。具有属性srcset和sizes的图片就像魅力一样。

使用下面代码段的示例，当视口宽度为600px（DPR = 1）时，浏览器会加载300x300px的图像并将其渲染为250px宽。我希望第一列（命名为插图）适合屏幕上图像的大小（250px）。

这在Google Chrome和Microsoft Edge上按预期工作。问题是在Firefox上首先总是获得图像的自然宽度（在这种情况下为300px），并且当DPR增加时它会变得更糟。

要重现此问题，只需在不同的浏览器上打开此问题即可。在Firefox中，您将看到第一列的红色背景。

我错过了什么吗？

如果我使用CSS设置图像的宽度，它可以正常工作，但我试图避免这种情况，以允许动态设置图像大小（例如在CMS中）。

.content {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: min-content auto;
  grid-template-areas: "illustration description" "illustration links";
}

.illustration {
  grid-area: illustration;
  background-color: red;
}

.description {
  grid-area: description;
}

.links {
  grid-area: links;
}

<div class="content">
  <div class="illustration">
    <img src="https://via.placeholder.com/50x50" srcset="https://via.placeholder.com/900x900 900w, https://via.placeholder.com/450x450 450w, https://via.placeholder.com/300x300 300w" sizes="(min-width: 900px) 300px, (min-width: 600px) 250px, (min-width: 490px) 250px, 100px"
    />
  </div>
  <div class="description">Bla bla bla</div>
  <div class="links">Link 1, Link 2</div>
</div>

CSS Grid列min-content不适合内容

0 个答案: