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

Question

我想创建一个全屏（以填充可见区域）2x2表，其中每个单元格包含一个中心对齐的图像，其大小调整到单元格（缩小/拉伸），这样就保持了它的比例。也许图像更好：

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

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="...">

这几乎没问题：它水平拉伸以填充单元格，但是这种情况下它的高度太大，因此桌子不适合屏幕，垂直滚动条出现。它也会水平收缩以填充单元格，但是这种情况下它的高度太大，因此桌子不适合屏幕，会出现垂直滚动条。

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

基本上，我想要一个全屏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定位相应的部分并删除边框

New Example

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>