Question

我试图在一个狭窄的父母内部制作一个响应全宽的图像。到目前为止，我无法清除这些元素。

Javascript没问题，但是因为它应该在WordPress主题中运行，所以不能使用HTML。

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

我认为不能只使用css，因为当您将position: absolute设置为img时，它的父级不再包含它。您可以编写一些javascript代码来执行此操作：

$('.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）

窄母体内的全宽图像

2 个答案: