Centered-image overflow

In response to: http://stackoverflow.com/questions/689991/center-image-inside-overflow-hidden-parent/16263245#comment46252259_16263245

by Aravinth K

HTML

<div class="outer">
    <div class="inner-inline-block">
        <img src="http://placehold.it/1200x300.png" alt="" />
    </div>
</div>

<div class="outer">
    <div class="inner-table">
        <img src="http://placehold.it/1200x300.png" alt="" />
    </div>
</div>

CSS

.outer {
    margin: 10px;
    overflow: hidden;
    background-color: Magenta;
}

.inner-inline-block {
    display: inline-block;
    position: relative;
    right: -50%;
}

.inner-table {
    display: table;
    position: relative;
    right: -50%;
}

img {
    display: block;
    position: relative;
    left: -50%;
}