将表格与背景图像按比例匹配答案

【问题标题】：Match table to background image with proportionality将表格与背景图像按比例匹配
【发布时间】：2022-01-12 15:07:04
【问题描述】：

寻找一种将表格与背景图像匹配的现代方法，所有内容都按比例缩放。在此特定项目中不关心移动设备上的可见性。带有入门引导主题的 Wordpress。这是一个 jsfiddle：https://jsfiddle.net/atomikdog/6m5h2wa0/26/

.entry-content {
  background-image: url("https://i.postimg.cc/R0rR2qmp/bg-report-test-1500x2023.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  min-height: 1700px;
  margin: 0 0 0 0;
  border: 1px dashed yellow;
}
.test {
  padding: 0 0 0 0;
  width: 77%;
  margin-top: 37px;
  border: 1px dashed cyan;
}
.row {
  border: 1px dashed green;
}
table {
  width: 100%;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}
td {
  font-size: 2vw;
  border: 1px solid red;
}
.col53 {
  width: 53%;
}

【问题讨论】：

标签： html css wordpress twitter-bootstrap html-table

【解决方案1】：

您的逻辑工作正常，期望顶部的边距，那是因为您使用了一个固定值，而它应该是一个相对的百分比。将测试边距更改为margin-top:6%; 似乎效果更好。我猜您也可以通过编辑图像来对其进行微调以满足您的需求。

【讨论】：

谢谢玛丽亚。但是对于较小的窗户呢？我想要所有 td 高度和文本以及适合背景图像的任何大小的窗口。现在 td 高度没有正确缩放。
桌面高度和 td 高度的百分比是否有效？
使用背景图像的纵横比尝试了 vw 和 calc()。似乎工作正常。

【解决方案2】：

采用结合大众汽车的方法。首先，我的背景图片 100% 适合 .entry-content。 .tableContainer 的大小为 75% 以匹配背景图像表。用过75vw。然后得到图像的纵横比来设置容器的高度。还使用媒体查询来设置最大宽度和高度...

.entry-content {
      background-image: url("https://i.postimg.cc/R0rR2qmp/bg-report-test-1500x2023.png");
      /* image aspect ratio is 1.349 */
      background-size: 100% auto;
      background-repeat: no-repeat;
      margin: 0 0 0 0;
      height: calc(100vw*1.349);
      max-width: 1200px; /* from wordpress */
    }
.tableContainer {
      padding: 0 0 0 0;
      width: 75vw;
      height: calc(75vw*1.349);
      margin-top: 6%;
    }
@media only screen and (min-width: 1200px) {
    .container-fluid.test {
        width: 900px;
        height: calc(1200px*1.349)
    }
}

从那里我确定了表格行的高度，使用固定像素高度作为最大尺寸，或者在窗口较小时使用 vw...

.test tr {
    height: 48.96px
}
@media only screen and (max-width: 1200px) {
    /* When 100 vw = 1200px; 100 vh = 1200px * 1.349 = 1618.8px; */
    /* When 100vw, table is 75vw 75vh */
    /* 48.96/1200 = 0.0408 */
    /* 4.08vw doesn't work so use an eyeball number */
    .test tr { height: 3.75vw; }
    ...

这可能是一个奇怪的解决方案。在我决定这是一个答案之前，我会先坐一会儿。

【讨论】：