jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: banner隨寬度等比cover

Browse Source
This commit is contained in:
jekkinoopy
2026-06-02 13:53:57 +08:00
parent b79309ad29
commit 4982ec0688
2 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/style.css
+6 -6
View File
@@ -43,15 +43,15 @@ body {
line-height: 1.6; line-height: 1.6;
} }
/* 首頁 Hero 全屏；內頁 banner 為 header.inner-page-header */ /* 首頁 Hero：高度隨寬度 16:9 等比縮放（上限一屏），cover 不留上下黑邊 */
header#origin { header#origin {
width: 100%; width: 100%;
height: 100vh; height: clamp(12rem, 56.25vw, 100dvh);
min-height: 100dvh; min-height: 0;
background-image: url('../images/header.jpg'); background-image: url('../images/header.jpg');
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 108%; background-size: cover;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -2100,8 +2100,8 @@ footer a .mark_b {
/* 內頁頂部 banner（全站 header.inner-page-header；首頁僅 #origin） */ /* 內頁頂部 banner（全站 header.inner-page-header；首頁僅 #origin） */
header.inner-page-header { header.inner-page-header {
width: 100%; width: 100%;
height: auto; height: clamp(10rem, 35vw, 20rem);
min-height: clamp(14rem, 38vh, 24rem); min-height: 0;
background-image: url('../images/header.jpg'); background-image: url('../images/header.jpg');
background-position: center 78%; background-position: center 78%;
background-repeat: no-repeat; background-repeat: no-repeat;
assets/css/tablet.css
+8 -1
View File
@@ -64,11 +64,18 @@
gap: clamp(12px, 2vw, 20px); gap: clamp(12px, 2vw, 20px);
} }
header { header#origin {
height: clamp(11rem, 56.25vw, 100dvh);
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
} }
header.inner-page-header {
height: clamp(10rem, 35vw, 19rem);
background-size: cover;
background-position: center 78%;
}
header#origin .hero .site-header-inner .main-title { header#origin .hero .site-header-inner .main-title {
font-size: clamp(1.75rem, 2.25vw + 1rem, 2.35rem); font-size: clamp(1.75rem, 2.25vw + 1rem, 2.35rem);
} }