16个div按行列排列,保持其纵横比不变的大小动态调整。

huangapple go评论68阅读模式
英文:

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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

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

<!-- language: lang-html -->

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

&lt;/div&gt;

huangapple
  • 本文由 发表于 2023年7月20日 16:32:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/76728039.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定