Full width image inside a narrow parent - css

Question

I'm trying to make a responsive, full width image work inside a narrow parent. So far, I can't clear these elements.
Javascript is ok, but fussing with the HTML isn't since it should work in a WordPress theme.
HTML:
<p>Visible content.</p>
<div class="feat-img">
<a href="#">
<img src="http://f.cl.ly/items/1e1515393T2l0D3I2503/feat-img.jpg"/>
</a>
</div>
<p>Hidden content :( </p>
</article>
CSS:
.feat-img img{
position: absolute;
width: 100% !important;
min-width: 400px;
min-height: auto;
height: auto;}
.feat-img img:empty{
left: 50%;
-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);}
article{
width: 50%;
margin: auto;
background:#ccc;}
Live: http://jsfiddle.net/wzvLa/4/

Answer 1

I think it can not be don only with css, because when you set position: absolute to img it's parent no longer contain it. You can write a little javascript code to do that:
$('.feat-img').css({ height: $('.feat-img img').height() });
This way you set the height of .feat-im to be the same as the image in it. Don't forget to do it on $(window).resize() too, so it can be responsive.
Here is what I do: jsfiddle

Answer 2

Here's one way of doing it:
html,body { margin: 0; }
.feat-img img {
position: relative;
width: 133.33%; /* (100% divided by article width) */
min-width: 400px;
height: auto;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
article {
width: 75%;
margin: auto;
background: #ccc;
}
(jsfiddle demo)