<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" srcset="../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_320.jpg 320w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_517.jpg 517w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_685.jpg 685w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_767.jpg 767w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_4_3,c_fill,g_auto__c_scale,w_694.jpg 694w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_16_9,c_fill,g_auto__c_scale,w_720.jpg 720w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_480.jpg 480w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_810.jpg 810w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1077.jpg 1077w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1274.jpg 1274w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1461.jpg 1461w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1643.jpg 1643w, ../../images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1700.jpg 1700w, ../../images/nature-connections-scarlet-honeyeater-bird-red-feathers.jpg"
alt="Scarlet honey eater bird" />
</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",
"srcset": [
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_320.jpg",
"width": 320
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_517.jpg",
"width": 517
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_685.jpg",
"width": 685
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_1_1,c_fill,g_auto__c_scale,w_767.jpg",
"width": 767
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg",
"width": 538
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_4_3,c_fill,g_auto__c_scale,w_694.jpg",
"width": 694
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg",
"width": 596
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_ar_16_9,c_fill,g_auto__c_scale,w_720.jpg",
"width": 720
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_480.jpg",
"width": 480
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_810.jpg",
"width": 810
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1077.jpg",
"width": 1077
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1274.jpg",
"width": 1274
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1461.jpg",
"width": 1461
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1643.jpg",
"width": 1643
},
{
"path": "/images/responsive-demo/nature-connections-scarlet-honeyeater-bird-red-feathers_bwlrqn_c_scale,w_1700.jpg",
"width": 1700
}
]
}
.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.