Focal point / focus point for responsive re-sizing images (e.g. full width header)

Question

I often make websites that are responsive and have full-width headers or elements on some places of the page that are full-width like image sliders.

I often make it so that they are transformed to

background-image: url(/images/image.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;

The problem with this approach is that often important content of the picture get cut off when stretching or shrinking the browser to different aspect ratios. Think about heads, limbs and so on.

Sometimes I can fix this by changing the background-position but often I dont.

I'm looking for a proper solution how I can make sure I can target important content so I know that content is shown no matter what aspect ratio.

Images to show the problem:

And also an image I picked from my own answer:

Answer 1

Seems that background-position is what you are looking for (but focusing on a position, not an area).

A demo focusing on the cat eyes. Hover on the div to see it adapting.

 .base { width: 500px; height: 200px; background: url(http://placekitten.com/1000/750); background-size: cover; position: absolute; top: 40px; left: 40px; background-position: 54% 46%; transition: height 2s, width 2s; } #base1:hover { height: 40px; } #base2 { top: 250px; height: 500px; width: 600px; } #base2:hover { width: 200px; } 

 <div class="base" id="base1"></div> <div class="base" id="base2"></div> 

Answer 2

I have found a jQuery library that allows focal points on images by adding data-attributes. It doesn't give the ability to focus on a complete area but at least it does the job it says it does and it's easy to apply.

https://github.com/jonom/jquery-focuspoint

For me this is not the most ideal solution, but it might be help to some.