Hero images are big high-resolution photos shown at the top of a page which usually precede articles or news stories. This type of design element has been in fashion for quite some time now and you can see them on Medium articles, Twitter, Facebook, YouTube and Google+ as the big “cover photo” at the top of each user profile.
The problem with this page design element is not that they aren't needed, overused, or over-hyped, but they seem to behave weird in responsive layouts, especially if you don't know how to create them or don't retain the services of a few thousand developers like the aforementioned companies.
A simple way to implement a hero image is to use the jQuery.herounit plugin and we're gonna go through a small explanation of how this tool works and how you can use it.
First of all, you can trust the plugin since it has been battle tested on a previous version of the Artsy website, and it comes with built-in support for realigning the images both vertically and horizontally.
Second of all, jQuery.herounit can work with images at any height and doesn't require any special configuration in your code outside how a classic jQuery plugin is loaded and initialized.
Step 1: Load jQuery and the plugin. This can be done in the page's head tag or at the end of the body tag.
<script src="jquery.herounit.min.js"></script>
<img src="hero-image.png" />
</div>
$('.hero-image-container').herounit({
height: 350,
$img: $('.hero-image-container img') });
})
jQuery.herounit comes with a working demo, but if you can't notice the (sample) cat image realigning itself on responsive layouts we made an alternate demo featuring our logo in the middle of the page that's much easier to tell when it's being resized and realigned on smaller screens.