Изображение полной ширины внутри узкого родителя

Question

Я пытаюсь сделать отзывчивую работу по полной ширине внутри узкого родителя. Пока что я не могу очистить эти элементы.

Javascript в порядке, но суетиться с HTML не так, поскольку он должен работать в теме WordPress.

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

Я думаю, что это не может быть дон только с помощью CSS, потому что, когда вы установите position: absolute в img его родителей больше не содержат его. Вы можете написать немного яваскрипта код, чтобы сделать это:

$('.feat-img').css({ height: $('.feat-img img').height() }); 

Таким образом, вы установите высоту .feat-im быть таким же, как изображение в нем. Не забудьте сделать это и на $(window).resize(), так что он может быть отзывчивым.

Вот что я делаю: jsfiddle

Answer 2

Вот один из способов сделать это:

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)