fix(single): fill slide and video cover media like the image cover

Slide-mode images rendered at intrinsic ratio, top-aligned inside the
swiper chain (--pc-height:auto left .swiper-wrapper content-sized), so
the taller box showed a gap at the bottom and never center-cropped like
the image cover. The video cover had the same problem through
video-player.js (height:auto, capped at 70vh).

- aksrt_render_slider scale mode emits --pc-height/--m-height 100% so
  the wrapper/slide/img chain fills the ratio box and object-fit: cover
  center-crops inside it (same pattern as the .scale-height widgets)
- video-player.js renders the video at height:100% + object-fit:cover;
  with an undimensioned container height:100% degrades to auto,
  matching the previous behavior
- drop the dead .single-cover padding-bottom rules (every producer owns
  its height inline, and the rule squeezed the absolutely positioned
  slide inner) and the orphaned --single-cover-scale var in
  tokens.css/compat-vars.css/main.css/InlineStyleBuilder
- rebuild public bundles; extend the single-cover-height contract
This commit is contained in:
2026-09-05 18:53:45 +08:00
parent 9fa7190232
commit d86147f406
11 changed files with 67 additions and 19 deletions
+5 -2
View File
@@ -96,13 +96,16 @@ function aksrt_render_slider(array $args = []): string {
$scale_padding = '';
if ($args['scale_height']) {
// padding-bottom percentage for ratio box (legacy graphic cover style).
// 内层 .new-swiper 为绝对定位铺满 wrapper,高度完全由 wrapper 的 padding-bottom 决定。
// 内层 .new-swiper 绝对定位铺满 wrapper,wrapper 决定盒子高度;
// pc/m-height 100% 让 .swiper-wrapper/.swiper-slide 铺满盒子,
// 使 object-fit: cover 在确定的盒内居中裁切(对齐单图封面)。
$ratio_pct = max(10, min(100, (float) $args['scale_ratio'] * 100));
$scale_padding = $ratio_pct . '%';
$scale_extra = trim((string) $args['scale_extra']);
if ($scale_extra !== '') {
$scale_padding = 'calc(' . $scale_padding . ' + ' . $scale_extra . ')';
}
$height_style = '--pc-height:100%;--m-height:100%;';
} else {
$height_style = sprintf('--pc-height:%s;--m-height:%s;', esc_attr($args['pc_height']), esc_attr($args['m_height']));
}
@@ -120,7 +123,7 @@ function aksrt_render_slider(array $args = []): string {
// 渲染 HTML
$html = '<div class="' . esc_attr($wrapper_class_str) . '"' . ($args['scale_height'] ? ' style="position:relative;padding-bottom:' . esc_attr($scale_padding) . ';"' : '') . '>';
$html .= '<div class="' . esc_attr($slider_class_str) . '" ' . implode(' ', $data_attrs) . ($args['scale_height'] ? ' style="position:absolute;inset:0;width:100%;height:100%;"' : ' style="' . esc_attr($height_style) . '"') . '>';
$html .= '<div class="' . esc_attr($slider_class_str) . '" ' . implode(' ', $data_attrs) . ' style="' . esc_attr($height_style . ($args['scale_height'] ? 'position:absolute;inset:0;width:100%;height:100%;' : '')) . '">';
$html .= '<div class="swiper-wrapper">';
foreach ($slides as $slide) {