Look at center of an image with CSS

I'm stuck in a problem. I have a image on a website that has usually a larger width than the screen. What I want to do is to move this image so t开发者_JAVA百科hat you always look on the center, even if youre resizing the browser.

code like this:

    .center {
      position: relative;
      margin-left: auto;
      margin-right: auto;
    }

<img class="center" src="picture.jpg">

does not help.

I cant find a proper solution. Using the image as CSS background would not help, as I want to change the images dynamically.

Is it even possible to do this with CSS? Or should I use JavaScript?

Thanks for reading!

Use a background image. You can change that not only with CSS (pseudo :hover), but also (and more effectively) with JavaScript.

.center {
    background: transparent url('/path/to/image') center center no-repeat;
    width: 100%;
    height: 100%;
}
.center:hover {
    background: transparent url('/path/to/another/image') center center no-repeat;
}

JavaScript (jQuery)

$('.center').css('background-image','url(/path/to/image)');

What about using Top:50% and Left:50% in your CSS to position to the middle of the image?

Bit late to the party but I think this is what you want:

.center {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    margin:auto;
}