英文:
CSS grid with fluid dimensions, shrink content while keeping their aspect ratio
问题
以下是翻译好的部分：
I want this auto grid to expand and shrink with the browser, while keeping the items centered in it, preserving their aspect ratio.
我希望这个自适应网格能够随着浏览器的大小变化而扩展和收缩，同时保持其中的项目居中，并保持它们的纵横比。
Ideally :
- Pure CSS
- Keeping grid in "auto" mode (no template)
理想情况： - 仅使用纯CSS
- 保持网格处于"auto"模式（无模板）
（我知道用例可能听起来很愚蠢，但这只是更复杂用例的伪代码）
On a large screen :
在大屏幕上：
| [1][2] |
| [3][4] |
On a narrow screen :
在窄屏幕上：
| |
|[1][2]|
|[3][4]|
| |
Without specifying any grid neither items size.
（不指定任何网格或项目的尺寸。）
项目会根据最大宽度或最大高度扩展，另一维度会相应地调整。
英文:
I want this auto grid to expand and shrink with the browser, while keeping the items centered in it, preserving their aspect ratio.
Ideally :
- Pure CSS
- Keeping grid in "auto" mode (no template)
(I know use-case might sound dumb, but this is pseudo-code of more complicated one)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div class="grid">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
<div class="item item4">item4</div>
</div>
<!-- language: lang-css -->
html {
height: 100%;
}
body {
height: 100%;
min-height: 100%;
max-height: 100%;
}
.grid {
height: 100%;
display: grid;
}
.item {
aspect-ratio: 1;
}
.item1 {
grid-row: 1;
grid-column: 1;
/* Demo purpose */
background-color: LightSalmon;
}
.item2 {
grid-row: 1;
grid-column: 2;
/* Demo purpose */
background-color: SlateBlue;
}
.item3 {
grid-row: 2;
grid-column: 1;
/* Demo purpose */
background-color: LightSeaGreen;
}
.item4 {
grid-row: 2;
grid-column: 2;
/* Demo purpose */
background-color: Plum;
}
<!-- end snippet -->
Edit : what I want, visually
On a large screen :
| [1][2] |
| [3][4] |
On a narrow screen :
| |
|[1][2]|
|[3][4]|
| |
Without specifying any grid neither items size.
(items expand to max width or max height, the other dimension accomodates accordingly)
答案1
得分: 1
依赖于 vmin 和 aspect-ratio
body {
margin: 0;
height: 100vh;
display: grid;
place-content: center;
}
.grid {
height: 100vmin;
aspect-ratio: 1;
display: grid;
}
.item1 {
grid-row: 1;
grid-column: 1;
/* 仅供演示目的 */
background-color: LightSalmon;
}
.item2 {
grid-row: 1;
grid-column: 2;
/* 仅供演示目的 */
background-color: SlateBlue;
}
.item3 {
grid-row: 2;
grid-column: 1;
/* 仅供演示目的 */
background-color: LightSeaGreen;
}
.item4 {
grid-row: 2;
grid-column: 2;
/* 仅供演示目的 */
background-color: Plum;
}
<div class="grid">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
<div class="item item4">item4</div>
</div>
英文:
rely on vmin and aspect-ratio
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
margin: 0;
height: 100vh;
display: grid;
place-content: center;
}
.grid {
height: 100vmin;
aspect-ratio: 1;
display: grid;
}
.item1 {
grid-row: 1;
grid-column: 1;
/* Demo purpose */
background-color: LightSalmon;
}
.item2 {
grid-row: 1;
grid-column: 2;
/* Demo purpose */
background-color: SlateBlue;
}
.item3 {
grid-row: 2;
grid-column: 1;
/* Demo purpose */
background-color: LightSeaGreen;
}
.item4 {
grid-row: 2;
grid-column: 2;
/* Demo purpose */
background-color: Plum;
}
<!-- language: lang-html -->
<div class="grid">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
<div class="item item4">item4</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论