Adjust height on mobile devices - html

Question

I have a site here: http://ideedev.co.uk/newseed/design/ and the banner at the top works great and just how I want it to - the banner image it 100% width of the site and the text floats in the middle and centre at all sizes.
However, for smaller mobile devices, I want to adjust the height of the image, so it scales down and keeps the ratio of the image in tact with the text still sticking in the middle. Can anyone help?
My HTML is here:
<div id="absolute1111" style=" background: url(<?php echo $feat_image; ?>);">
<div class="centerd1111">
<h1><?php the_title(); ?></h1>
</div>
</div>
My CSS is here:
#absolute1111 {
position:relative;
width:100%;
height:50%;
display:table;
color: #fff;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: 50% !important;
}
.centerd1111 {
display:table-cell;
vertical-align:middle;
text-align:center;
height:500px;
padding: 0 50px 0 50px;
}
Many thanks :)

Answer 1

Using image as a background image won't allow you to scale down image with screen size as you have to adjust the height manually to scale down the image which is not a good practice.
Using the image in HTML browser will be able to scale down the image, keeping the aspect ratio intact.
In your case, you can use media query for mobile to adjust the image height so the whole image scales down and the full image is shown.
Here is the code for the same:
#media only screen and (max-width: 500px){
.centerd1111 { height: 180px; }
}
Let me know if this works for you.
Thanks.

Answer 2

instead of background css attribute, you can put the image as element, in this way, you can manipulate it more easier. this if my fiddle. but for this fiddle, I only make it for mobile, so you need to apply this to #media query for mobile display.
https://jsfiddle.net/bdv2L0a0/
this fiddle, I made it that, the image's height will follow its proportion when the display becoming smaller
.background img {
width: 100%;
height: auto; //default value, no need to declare this
}

Answer 3

If you know the ratio of the image (proportion between height and width), you can do this:
.your-container {
overflow: hidden;
height: 0;
padding-bottom: 46.406570842%; /* image height / image width */
}
This is the trick used to embed iframes that maintain ratio in different viewport sizes. It's based on the fact that when you give a percentage value to padding property, it applies this percentage to the element width.
Also, you don't need to give display: table to center the text. You can just do this:
.your-container {
text-align: center;
position: relative;
}
.your-centered-text {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
See this jsfiddle.