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:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user