-
-
Save croxton/5fe5087739ea5442cbc6 to your computer and use it in GitHub Desktop.
| HTML: | |
| <header id="js-cover" class="cover"> | |
| <!-- Optionally specify image width stoppoints to reduce the maximum possible no of transforms per image --> | |
| <!-- The appropriate image resolution will automatically be loaded --> | |
| <img | |
| data-stoppoints="480,768,1200" | |
| data-src="http://res.cloudinary.com/<your account name>/image/fetch/w_auto,dpr_auto/http://<your full img url>" | |
| class="cld-responsive cover-img" id="js-cover-img"> | |
| <h1>Perfectly centered!</h1> | |
| </header> | |
| CSS: | |
| .cover { | |
| min-height: 300px; | |
| height: 100vh; | |
| text-align: center; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: #FFF; | |
| background-repeat: no-repeat; | |
| background-size:cover; | |
| background-position: center center; | |
| background-attachment:scroll; | |
| overflow: hidden; | |
| } | |
| /* you could alternatively use a loading sprite here and hide on first load */ | |
| .cover-img { | |
| display: none; | |
| } | |
| JS: | |
| <!-- jQuery --> | |
| <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> | |
| <script>window.jQuery || document.write('<script src="/_assets/js/jquery-1.11.2.min.js"><\/script>')</script> | |
| <!-- Cloudinary --> | |
| <script src="https://rawgit.com/cloudinary/cloudinary_js/master/js/jquery.cloudinary.js"></script> | |
| <script> | |
| $(function() { | |
| $.cloudinary.config({ cloud_name: '<your account name>', api_key: '<your api key>'}) | |
| $.cloudinary.responsive({ | |
| type : 'fetch', | |
| responsive_use_stoppoints : true | |
| }); | |
| $("#js-cover-img").load(function(){ | |
| $("#js-cover").css('backgroundImage', 'url('+$("#js-cover-img").attr('src')+')'); | |
| }); | |
| }); | |
| </script> |
Thanks for the gist, though I don't believe this works well for narrow screens (e.g., mobile).
The resolution of the image is calculated with the width of the screen, making it very low res on a narrow device (where the height is much greater in proportion to the width, and the image is forced to zoom in a lot).
For an example of what I mean, you can clone this repo, open index.html, make the browser screen narrow, and refresh.
Here's what happens:
True, what I often do is set the containing div to maintain a specific aspect ratio, combined with a <picture> element if that aspect ratio should change at different breakpoints.
I'm not exactly sure what you mean. Are you saying that a <picture> element can be used to compensate for aspect ratios that have a greater height than width? If so, could you please elaborate (or even better, submit a pull request to my repo above?)
Actually this is intentional. Cloudinary will upload a remote image on the fly:
data-src="http://res.cloudinary.com/<your account name>/image/fetch/w_auto,dpr_auto/http://www.your-website/your-image.jpg"You need the account name and key for uploads :)