.slider { display: block; width: 100%; aspect-ratio: 1440 / 400; /* 預留比例，解決 LCP 與 CLS */ background-color: #f0f0f0; position: relative; /* 關鍵：讓內部的文字可以相對它定位 */ overflow: hidden; } .slider img { width: 100%; height: 100%; /* 填滿容器 */ display: block; object-fit: cover; /* 確保圖片不變形 */ } /* 讓 figcaption 浮在圖片上方 */ .slider figcaption { position: absolute; /* 關鍵：脫離文件流，不被圖片擠下去 */ top: 50%; /* 垂直置中 */ left: 50%; /* 水平置中 */ transform: translate(-50%, -50%); /* 精確校準中心點 */ z-index: 2; /* 確保層級高於圖片 */ /* 這裡可以根據你的需求微調文字樣式 */ font-size: 2rem; font-weight: bold; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* 增加陰影，避免文字在白圖上看不清 */ white-space: nowrap; } dialog.nojs { display: block !important; font-size: 2rem; z-index: 9999; } #loading { display: none !important }