HTML:全屏 2x2 表格，每个单元格中都有缩小/拉伸(stretch)(但比例正确)的图像

Question

我想创建一个全屏(以填充可见区域)的 2x2 表格，其中每个单元格都包含一个居中对齐的图像，其大小根据单元格进行调整(收缩/拉伸(stretch))，这样它就是比例保持。也许图像更好:

到目前为止我发现了什么:

2x2 全屏表格 HTML:

<table style="height:100%;width:100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0;border:1px solid">
 <tr style="height: 50%;">
   <td style="width: 50%; text-align: center; vertical-align: middle;"></td>
   <td style="width: 50%; text-align: center; vertical-align: middle;"></td>
 </tr>
 <tr style="height: 50%;">
    <td style="width: 50%; text-align: center; vertical-align: middle;"></td>
    <td style="width: 50%; text-align: center; vertical-align: middle;"></td>
 </tr>
</table>   

我尝试在单元格中添加图像，例如:

<img style="width: 100%;max-height: 100%" src="...">

这几乎没问题:它水平拉伸(stretch)以填充单元格，但在这种情况下它的高度太大，因此表格不适合屏幕，出现垂直滚动条。它还会水平收缩以填充单元格，但在这种情况下高度太大，因此表格无法适应屏幕，出现垂直滚动条。

所以宽度变化是可以的，但不考虑高度应该是领导者的情况。

基本上，我想要一个全屏 2x2 画廊查看器，每个图像尽可能多地填充单元格，保持比例。

Answer 1

我假设使用 <table>是不是强制性的？我创建了一个使用 4 个 div 的示例。干净、简单。

标记缩减为:

<div class="section">Section 1 image</div>
<div class="section">Section 2 image</div>
<div class="section">Section 3 image</div>
<div class="section">Section 4 image</div>

基础 CSS

• 部分是 display: inline-block具有 50% 的高度和宽度。

• 图片有 100% 的高度，并且会保持正确的高宽比

• box-sizing: border-box将边框合并到部分的宽度/高度中

• html, body { height: 100%; }允许部分有 50% 的高度

• 正文被赋予适当的最小宽度，以防止部分随着最大宽度变得太小

• 为防止出现双边框，适当的部分用nth-child 定位。/first-child并移除边框

新例子

max-width和 max-height在垂直和水平调整大小时保持图像的纵横比

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  min-width: 500px;
  max-width: 800px;
  margin: 0 auto;
}
.section {
  width: 50%;
  height: 50%;
  border: solid 1px #000;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.section:first-child,
.section:nth-child(3) {
  border-right: none;
}
.section:nth-child(1),
.section:nth-child(2) {
  border-bottom: none;
}
.section img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-height: 90%;
  max-width: 90%;
}

<div class="section">
  <img src="http://placehold.it/200" />
</div><div class="section">
  <img src="http://placehold.it/200" />
</div><div class="section">
  <img src="http://placehold.it/200" />
</div><div class="section">
  <img src="http://placehold.it/200" />
</div>

---

已存档 - 已损坏 - 示例

“显示代码片段”然后运行它。

请注意关闭和打开 div 标签之间没有空格。这是给prevent the gap that occurs between inline elements .

例子1

图像是position: absolute并根据其具有 position: relative 的部分容器定位自己.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  min-width: 500px;
  max-width: 800px;
  margin: 0 auto;
}
.section {
  width: 50%;
  height: 50%;
  border: solid 1px #000;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.section:first-child,
.section:nth-child(3) {
  border-right: none;
}
.section:nth-child(1),
.section:nth-child(2) {
  border-bottom: none;
}
.section img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 100%;
  padding: 10px;
}

<div class="section">
  <img src="http://placehold.it/200" />
</div><div class="section">
  <img src="http://placehold.it/200" />
</div><div class="section">
  <img src="http://placehold.it/200" />
</div><div class="section">
  <img src="http://placehold.it/200" />
</div>

例子2

图像不是 position:absolute并以填充和 text-align: center 为中心

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 99%;
}
body {
  min-width: 500px;
  max-width: 800px;
  margin: 0 auto;
}
.section {
  width: 50%;
  height: 50%;
  border: solid 1px #000;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}
.section:nth-child(1),
.section:nth-child(2) {
  border-bottom: none;
}
.section:first-child,
.section:nth-child(3) {
  border-right: none;
}
.section img {
  height: 100%;
  padding: 10px;
}

<div class="section">
  <img src="http://placehold.it/200" />
</div><div class="section">
  <img src="http://placehold.it/200" />
</div><div class="section">
  <img src="http://placehold.it/200" />
</div><div class="section">
  <img src="http://placehold.it/200" />
</div>