我试图做一个图片库时捉襟见肘，而我需要的图片采取一半的高度，并在容器内可用宽度的一半，所以我做了这样的事情：格列使用FR单位

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
div { 
 
    height: 200px; 
 
    display: grid; 
 
    grid-template-columns: repeat(2, 1fr); 
 
    grid-template-rows: repeat(2, 1fr); 
 
} 
 

 
div > figure > img { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
}

<div> 
 
    <figure> 
 
    <img src="http://lorempicsum.com/futurama/327/100/1"> 
 
    </figure> 
 
    <figure> 
 
    <img src="http://lorempicsum.com/futurama/427/200/2"> 
 
    </figure> 
 
    <figure> 
 
    <img src="http://lorempicsum.com/futurama/527/300/3"> 
 
    </figure> 
 
    <figure> 
 
    <img src="http://lorempicsum.com/futurama/627/200/4"> 
 
    </figure> 
 
</div>

现在我不明白的是，为什么我的图片不是100px的高呢？ fr单位是不是应该在我的figure之间平均分配空间？为什么它的行为方式与我的做法相同grid-template-rows: repeat(2, 100px);或grid-template-rows: repeat(2, 50%);？

编辑

我只是偶然发现了this post在那里说

的FR单元填补了可用空间，但它决不会比该行或列

的含量较小但这是否意味着我只是不能在这种情况下使用fr单位？

来源

2017-10-20 evuez

对电网项目的初始设置为'最小高度：auto'。这意味着网格项不能小于其内容的大小。图像的高度（100px，200px，300px）会在网格项堆叠时强制超过容器的高度（200px）。覆盖'min-height'默认值。将'min-height：0'添加到您的网格物品（'figure'）。 https://jsfiddle.net/yL74vx2s/ –

我认为你需要宽度DIV

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
div { 
 
    height: 200px; 
 
width:200px; 
 

 
    display: grid; 
 
    grid-template-columns: repeat(2, 1fr); 
 
    grid-template-rows: repeat(2, 1fr); 
 
} 
 

 
div > figure > img { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
}

<div> 
 
    <figure> 
 
    <img src="http://lorempicsum.com/futurama/327/100/1"> 
 
    </figure> 
 
    <figure> 
 
    <img src="http://lorempicsum.com/futurama/427/200/2"> 
 
    </figure> 
 
    <figure> 
 
    <img src="http://lorempicsum.com/futurama/527/300/3"> 
 
    </figure> 
 
    <figure> 
 
    <img src="http://lorempicsum.com/futurama/627/200/4"> 
 
    </figure> 
 
</div>

来源

2017-10-20 10:25:13 Raspberryano

我不能因为我想我的div需要100％的可用空间。 – evuez

格列使用FR单位

编辑

回答

相关问题