Currently, I am working on coding a header image that resembles the one showcased on this particular page: . Kindly pay attention to how the image of the guy behaves when the page is resized. It remains centralized, maintains its position, and does not get cropped (although slightly at the bottom). Below is my simple code snippet: (you can also view it in action here: https://jsfiddle.net/wvep5ga1/)
html:
<div class="outer">
</div>
css:
.outer{
background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
background-size:cover;
background-origin:padding-box;
background-position:top center;
min-height:386px;
}
The issue I'm encountering is that upon resizing the browser window, the div shrinks rapidly to the extent where only the man's face is visible, unlike the original page where both his shoulders are consistently displayed. I hope I've articulated this problem accurately - essentially, the height of the div changes more dramatically than desired during window resizing, affecting the overall layout since the man's image should always maintain its position and aspect ratio. While I have managed to address the aspect ratio concern, I am struggling with the excessive compression and expansion of the div's height during window resize.
I believe the original page was created using Drupal 7, but what I seek is a CSS solution that replicates this functionality. I remain optimistic about finding a resolution, as I have spent countless hours experimenting without success. Although the original page includes images of varying resolutions, I do not consider this to be the primary issue.
Your assistance in resolving this matter would be greatly appreciated. I eagerly await your insights.
Thank you kindly in advance!