Poster image is crunched

Okay my friends, I need to find out why this poster images is not showing full screen on XLR breakpoint. No problem with the width, but there is something wrong with showing the height.

<!-- bloc-7 -->
<div class="bloc bloc-fill-screen bgc-black hero-full-page none full-width-bloc bg-G2-AWS-1280-X-1646 d-bloc " id="bloc-7">
	<div class="container">
		<div class="row">
			<div class="col-12">
			</div>
		</div>
	</div>
</div>
<!-- bloc-7 END -->

https://a2mcontractors.com/aws

Name Size

G2-AWS_576-X-741.jpg 95.063 KB
G2-AWS_768-X-988.jpg 169.770 KB
G2-AWS_992-X-1275.jpg 293.513 KB
G2-AWS_1280-X-1646.jpg 486.993 KB
G2-AWS_2560-X-3291.jpg 1.631 MB

Any reason why you have it set as a background image?

Its always going to squash up based on the available vertical height you have, due to the way you are applying this.

Thanks Pete, you always have good insight.

So are you saying in order to obtain full height, I should not use background images?

What I done here is made a custom class added the the optimized images to each breakpoint.

I do not have a breakpoint for G2-AWS_2560-X-3291.jpg 1.631 MB. Didn’t know how to add another.

You have a fixed image ratio, you are trying to fit into an area that is not always a matching ratio. And because you have the width set to 100% the height is squashing to fit into the space.

Even with breakpoint images you will have this issue as someone resizes the browser window between those break points.

You need to have either the height or the width set as auto. Usually its set the height to the size you want, and the width as auto. Really depends on what your desired outcome is.

But I would just use a normal image here, not a background.

Personally, I do not like the Poster style, but my friends wants it like that.

I will try the Auto feature on height and see how it works. BTW, @Malachiman, were you referring to Padding and Margin… that’s is the only place I see any settings for Auto.

Fixed it, thank you @PeteSharp
I made a bloc, added the image bric made a custom class added the optimized images to each breakpoint.