<section class="full-width-image">
<figure class="full-width-image-fig">
<img class="full-width-image-img" src="../../images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg" alt="Scarlet honey eater bird" />
<figcaption class="full-width-image-caption">
<span class="full-width-image-caption-background">Scarlet honey eater bird</span>
</figcaption>
</figure>
</section>
<section class="full-width-image">
<figure class="full-width-image-fig">
<img class="full-width-image-img" src="{{ path | path }}"{% if srcset %} srcset="{% for src in srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ path | path }}"{% endif %} alt="{{ alt }}" />
{% if caption %}
<figcaption class="full-width-image-caption">
<span class="full-width-image-caption-background">{{ caption }}</span>
</figcaption>
{% endif %}
</figure>
</section>
{
"alt": "Scarlet honey eater bird",
"path": "/images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg",
"caption": "Scarlet honey eater bird"
}
.full-width-image {
@include full-bleed;
@include margin-large;
position: relative;
min-height: 1px; // for IE11 Flexbox bug: https://github.com/philipwalton/flexbugs/issues/75
font-size: 0;
@include for-phone-only {
@include margin-medium;
}
&-fig {
margin: 0;
}
&-img {
max-width: 100%;
}
&-caption {
@include full-bleed-inset;
@include small-body-font;
position: absolute;
bottom: 0;
@include for-tablet-landscape-up {
max-width: 50%;
}
@include for-phone-only {
position: relative;
bottom: initial;
max-width: initial;
}
&-background {
display: inline-block;
margin-bottom: -1px;
border-bottom: 1px solid $white;
background: $white;
padding: .5em 1em;
color: $primary-blue;
@include for-phone-only {
margin: 0;
border-bottom: 0;
padding: .5em 0;
}
}
}
}
An image, with optional caption, which fills the full width of the viewport. Does not crop, height is flexible and respects the original image ratio.
Responsive images are supported through use of the srcset property, which combine an image path and a target screen width at which the image should be displayed.