IMG bigger than container, how can I center the image? [closed]

Question

I have an image that is bigger than the container in height, now I have overflow hidden which is ok, as I don't want the image to go out from the container. - The problem is that I want to at least get the center of the image to show rather than the top?

I know there is scrollTop but that scrolls everything including the buttons etc.

Any suggestions?

Answer 1

If you can use "position:absolute" or "position:fixed" with your code, you can simply use the CLIP property on the container. Please, look at Clip property

Answer 2

Try this:

<div class="container">
    <img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" />
</div>
<br/>
<br/>
<br/>
<img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" />

css:

.container {
    width: 300px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border: 1px solid red;
    margin: 100px;
}
.container img {
    top: 50%;
    left: 50%;
    width: 640px;
    height: 480px;
    margin: -240px 0 0 -320px;
    position: absolute;
}

margin -240px is the height of the image (480px) divided by 2, and margin -320px is the width of the image (640px) divided by 2.

Example