These images are being sourced from https://hallmark-design.co.uk, which I have added as a "web folder" source in imgix. Please try it out with your own domain rather than use up my bandwidth :).
<!DOCTYPE html>
<html>
<head>
<title>Test Imgix</title>
<!-- imgix config -->
<meta property="ix:host" content="hallmark.imgix.net">
<meta property="ix:useHttps" content="true">
<style>
body {
margin:0;
padding:0;
}
.cover {
min-height: 300px;
height: 50vh;
background-repeat: no-repeat;
background-size:cover;
background-position: center center;
background-attachment:scroll;
overflow: hidden;
}
.cover img {
display: none;
}
</style>
<!-- legacy browser support -->
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="https://cdn.rawgit.com/scottjehl/picturefill/master/dist/picturefill.min.js" async></script>
</head>
<body>
<h1>Responsive image</h1>
<img
ix-path="uploads/images/projects/venner_shipley/02_Core_Flexibility.jpg"
ix-params='{
"w": 400,
"h": 200,
"fit": "crop",
"crop": "center"
}'
sizes="(min-width: 60em) 33.3vw, (min-width: 36em) 66.6vw, 100vw"
alt="Test"
>
<h1>Responsive background image</h1>
<div class="cover">
<img
id="js-img"
ix-path="uploads/images/projects/venner_shipley/02_Core_Flexibility.jpg"
ix-params='{
"w": 400,
"h": 200,
"fit": "crop",
"crop": "center"
}'
sizes="100%"
alt="Test"
>
</div>
<h1>Responsive art directed image</h1>
<picture>
<source
media="(min-width: 880px)"
sizes="430px"
ix-path="uploads/images/projects/venner_shipley/02_Core_Flexibility.jpg"
ix-params='{
"w": 300,
"h": 300,
"fit": "crop",
"crop": "right",
"flip" : "h"
}'
>
<source
media="(min-width: 640px)"
sizes="calc(100vw - 20px - 50%)"
ix-path="uploads/images/projects/venner_shipley/02_Core_Flexibility.jpg"
ix-params='{
"w": 300,
"h": 300,
"fit": "crop",
"crop": "center"
}'
>
<source
sizes="100vw"
ix-path="uploads/images/projects/venner_shipley/02_Core_Flexibility.jpg"
ix-params='{
"w": 300,
"h": 100,
"fit": "crop"
}'
>
<img ix-path="uploads/images/projects/venner_shipley/02_Core_Flexibility.jpg" alt="Test">
</picture>
<!-- @see: https://github.com/imgix/imgix.js -->
<script src="https://cdn.rawgit.com/imgix/imgix.js/master/dist/imgix.min.js"></script>
<!-- responsive background image -->
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
var $img = $("#js-img");
if ($img.length) {
// triggered whenever an image is loaded, including on resize
$img.load(function(){
// legacy browser support
picturefill();
// fallback to src for browsers without srcset support
var src = $img.prop('currentSrc') || $img.prop('src');
// set the background image for the parent
var $parent = $img.parent();
$parent.css('backgroundImage', 'url('+src+')');
});
}
</script>
</body>
</html>
Images are (c) copyright Hallmarkdesign 2016. All rights reserved.
Interesting. Is this the only way to achieve background "cover" style images in divs using imgix.js? I have an issue with the jquery code, since I'm using angular 4, where it's not very much advised to do so...