[FIXED] How to center image which is bigger than screen?

Issue

I've following code:

HTML

<div class="banner">
    <img src="banner.png">
</div>

CSS

.banner > img {
    margin: auto;
}

The Image have a width of 3000px and a height of 200px I want the image horizontal centered and no horizontal scroll bar. (Browser resizing should no problem then)

I've tried to give the .banner div the banner image as background-image but then the div won't find it's size automatically ...

How is this possible?

Solution

Your best option is using the images as background, but if you want/need to use the image, do it like this

.banner{overflow:hidden; height:200px; width:100%; text-align:center;}
.banner img{width:100%; height:100%; margin:0 auto;}

Answered By - Devin

Answer Checked By - Cary Denson (PHPFixing Admin)