窄父级内的全宽图像

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;}

直播：http://jsfiddle.net/wzvLa/4/

Answer 1

这是一种方法：

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)

Answer 2

我认为它不能只使用 css，因为当您将 position: absolute 设置为 img 时，它的父级不再包含它。您可以编写一些 JavaScript 代码来做到这一点：

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

这样你将.feat-im 的高度设置为与其中的图像相同。不要忘记在$(window).resize() 上也这样做，这样它就可以响应了。

这是我的工作：jsfiddle