26 lines
2.4 KiB
HTML
26 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>cover repro</title>
|
||
<link rel="stylesheet" href="../assets/css/main.min.css">
|
||
<link rel="stylesheet" href="../assets/css/swiper.css">
|
||
<link rel="stylesheet" href="../assets/css/frontend/single-post/cover.css">
|
||
<style>
|
||
body { padding: 20px; max-width: 800px; }
|
||
h4 { margin: 10px 0; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h4>A: 当前 markup（--pc-height:100%，无 padding）</h4>
|
||
<div class="single-head-cover">
|
||
<div class="aksrt-slider-wrapper mb20 single-cover-slide imgbox-container aksrt-slider-wrapper--scale aksrt-slider-wrapper--has-overlay" style="position:relative;padding-bottom:calc(35% + 50px);"><div class="new-swiper slide-index single-cover single-cover--slide" data-effect="slide" data-loop data-autoplay data-interval="5000" style="--pc-height:100%;--m-height:100%;position:absolute;inset:0;width:100%;height:100%;"><div class="swiper-wrapper"><div class="swiper-slide"><img class="lazyload fit-cover" src="img-a.svg" alt="a"></div><div class="swiper-slide"><img class="lazyload fit-cover" src="img-b.svg" alt="b"></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-pagination"></div></div><div class="aksrt-slider-overlay"><div class="abs-center left-bottom single-cover-con"><h1 class="article-title title-h-left">标题测试</h1></div></div></div>
|
||
</div>
|
||
|
||
<h4>B: 旧状态参考（--pc-height:auto，内层有 padding）</h4>
|
||
<div class="single-head-cover">
|
||
<div class="aksrt-slider-wrapper mb20 single-cover-slide imgbox-container aksrt-slider-wrapper--scale aksrt-slider-wrapper--has-overlay" style="position:relative;padding-bottom:calc(35% + 50px);"><div class="new-swiper slide-index single-cover single-cover--slide" data-effect="slide" style="--pc-height:auto;--m-height:auto;--scale-ratio:0.35;padding-bottom:35%;position:absolute;inset:0;width:100%;height:100%;"><div class="swiper-wrapper"><div class="swiper-slide"><img class="lazyload fit-cover" src="img-a.svg" alt="a"></div><div class="swiper-slide"><img class="lazyload fit-cover" src="img-b.svg" alt="b"></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-pagination"></div></div><div class="aksrt-slider-overlay"><div class="abs-center left-bottom single-cover-con"><h1 class="article-title title-h-left">标题测试</h1></div></div></div>
|
||
</div>
|
||
</body>
|
||
</html>
|