Vertically centering image in 100% width container

[JamieEff]

Just wondering if someone would be able to help me out please.

Basically, I have set a container to be 100% of the screen and within that container an image which is also set to 100% with a max-height of 400px. What I am trying to do is make the image center vertically within the container and cant figure out how to get it to work.

This is the code that I am currently working with:

html:

<div id="heroContainer">
        <div id="navContainer"> <img id="heroImages" src="images/slideshow/<?php echo($Slideshow->getColumnVal("SlideshowImage")); ?>"> </div>
</div>

css:

#heroContainer { width: 100%; max-height: 200px; overflow: hidden; background-size:contain; margin: 0 auto; background-color: #eee; }
#heroContainer img#heroImages { display: block; transition: width 2s; width: 100%; }

Thanks in advance for any help you can give.

All the best

Jamie

[RyanReese]

Something like this?

Assigned a mock height to the heroContainer. Not entirely sure what use this will be in your website so I can only assume that this is what you want?
http://codepen.io/ryanreese09/pen/VYyxaJ

[JamieEff]

Hey Ryan

TThank you for your reply.

Perhaps it would make more/better sense in context: http://clients.motley.co.uk/hazel/index.php

Basically as you can see images are being shown from the top and would like to make them show from the center of the images rather than the top…

Does that make sense?

Cheers

Jamie

[RyanReese]

You could give a max-height on the image? Most of your images are 525px height so just throw on max-height:525px.

Bit difficult because I can stretch my monitor to 3000px wide and your images still get bigger. Makes it hard for a static CSS-only solution (i.e. you might be looking at Javascript with your current page dynamic.)

[JamieEff]

yep, its only an ‘issue’ when the viewport starts expanding outside of 1024 resolution…
thanks for your input, appreciate the help

Jamie

[JamieEff]

sorry meant to add that using the max-height on the image starts distorting the proportion as you make the screen res larger…

[RyanReese]

Perhaps you should add a wrapper to your page (or set your outer elements) to a max-width of 1000px? Need to cap it eventually .

[JamieEff]

wise words Ryan. thank you!

[PaulOB]

The way I do full width images like that is to set an arbitrary height for the container (use media queries to increase/decrease the height as required) and then place the image using a background image with background-size:cover and background-position 50% 50%.

This keeps the image centered in the space and covering the whole width and also allows complete control over the layout. Of course you have to manage your resources to use a background image instead of a foreground image but that shouldn’t be too hard.

[JamieEff]

Thanks Paul

Will have a try with that

Jamie