尋找一種將表格與背景影像匹配的現代方法，所有內容都按比例縮放。在此特定專案中不關心移動設備上的可見性。帶有入門引導主題的 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%;
}
uj5u.com熱心網友回復：
您的邏輯作業正常，期望頂部的邊距，那是因為您使用了一個固定值，而它應該是一個相對的百分比。將測驗邊際更改為margin-top:6%;似乎效果更好。我猜您也可以通過編輯影像來微調它以滿足您的需求。
uj5u.com熱心網友回復：
采用結合大眾汽車的方法。首先，我的背景圖片 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; }
...
這可能是一個奇怪的解決方案。在我決定這是一個答案之前，我會先坐一會兒。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/408966.html
標籤：
上一篇：大螢屏中的視頻