2023年7月20日 16:32:14go评论70阅读模式

英文:

16 divs arranging columns and rows with size dynamically by keeping its aspect ratio intact

问题

我想创建16个div，按动态大小排列成列和行，保持其纵横比不变。

像第一个div比其余的大2倍，而其他所有的div大小保持一致。

这是代码：

.video-container {position: relative; overflow: hidden; width: 100%; height: 100%;}
video { width: 100%; height: 100%; object-fit: cover;}

我尝试过，但没有成功。

英文:

I want to create 16 divs that arranging columns and rows with size dynamically by keeping its aspect ratio intact.

like First being 2x big as rest and all others stays with the same.enter image description here
With all of same size, enter image description here

This is the code

.video-container {position: relative; overflow: hidden; width: 100%; height: 100%;}
video { width: 100%; height: 100%; object-fit: cover;}

I tried to do but couldnt get anything

答案1

得分: 1

使用CSS网格布局：

.container {
  display: grid;
  grid-template-columns: repeat(4,auto);
}

.container > * {
  max-width: 100%;
}

<div class="container">

</div>

英文:

Use CSS grid for that:

.container {
  display: grid;
  grid-template-columns: repeat(4,auto);
}

.container &gt; * {
  max-width: 100%;
}

&lt;div class=&quot;container&quot;&gt;

&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。