fix(hero): serve full-resolution carousel images
Bootstrap-3 caps slide images with `max-width: 100%` only; if the natural image is narrower than the viewport, the slide stops short of the column edge. The macro was downscaling to 1920 px, which made the hero shrink on >1920 px screens. Match live's behaviour by serving the raw source image (5345 / 5621 px wide) without resize — the source images are intentionally oversized for this reason. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -16,7 +16,11 @@
|
|||||||
<div class="carousel-inner" role="listbox">
|
<div class="carousel-inner" role="listbox">
|
||||||
{% for slide in section.extra.slides %}
|
{% for slide in section.extra.slides %}
|
||||||
<div class="item{% if loop.first %} active{% endif %}">
|
<div class="item{% if loop.first %} active{% endif %}">
|
||||||
{{ image::render(src=slide.image, width=1920, alt=slide.alt) }}
|
{# Serve the source image at full resolution — Bootstrap-3 only
|
||||||
|
constrains via `max-width: 100%`, so on viewports wider than
|
||||||
|
the natural image width the slide would otherwise sit short
|
||||||
|
of the column edge. Live does the same (no resize). #}
|
||||||
|
{{ image::render(src=slide.image, alt=slide.alt) }}
|
||||||
<div class="carousel-caption">
|
<div class="carousel-caption">
|
||||||
<p>{{ slide.heading }}</p>
|
<p>{{ slide.heading }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user