縮小父母內部的全寬圖像

我想在縮小父母內部做出響應式全寬圖像工作。到目前爲止，我無法清除這些元素。縮小父母內部的全寬圖像

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/

來源

2014-06-13 Felipe Dário

我認爲這不可能是唐只用CSS，因爲當你設置position: absolute到img它的父不再包含它。你可以寫一個小javascript代碼做到這一點：

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

您設置的.feat-im高度這種方式是一樣的形象吧。不要忘記在$(window).resize()也這樣做，所以它可以響應。

這裏是我做的：jsfiddle

來源

2014-06-13 12:54:45 ndcweb

這不顯示隱藏的內容。 –

對不起，我的錯誤:)再次嘗試：http://jsfiddle.net/wzvLa/8/ – ndcweb

這是更好的，但一旦你擴大屏幕尺寸，它最終隱藏內容 –

下面是做這件事的一種方法：

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）

來源

2014-06-13 12:53:45 thykka

打破形象，它不再是100％的寬度 –

@MathewMacLean是的，你需要從HTML刪除利潤率得到它可拉伸至100％的頁面寬度。請參閱[這裏]（http://jsfiddle.net/5pz2d/） – thykka

縮小父母內部的全寬圖像

回答

相關問題