含有嵌段錨定圖像從容器溢出的div

我有以下元件的標記：含有嵌段錨定圖像從容器溢出的div

<div class="container"> 
    <a href="#"> 
     <img src="http://placehold.it/250x500" alt="img" /> 
    </a> 
</div>

與此CSS：

.container { max-width: 150px; max-height: 150px; } 
.container a { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }

看到this fiddle（I添加顏色和不透明度在那裏，以更好地顯示我的問題）

問題是，雖然錨符合他父母的寬度（最大寬度：100％;）這是不適合他的父母nt的高度，它適合他的孩子img的高度，而我真的不知道爲什麼，因爲我設置了最大高度：100％。如果我將容器的最大高度更改爲只有高度它的工作原理，但我需要它是最大高度。

PS：我不想隱藏容器的溢出（溢出：隱藏），我希望錨點是容器的高度！

PPS：的問題不是在錨，我把容器的IMG公司的母公司是要去適應IMG的高度，除非我給固定高度到容器或到IMG的父親（每個項目在我的情況下，錨），但我不想這樣做，因爲我需要它是流體。

PPPS：我部分地回答了這個問題：我可以設置錨的最大高度繼承，就像在this example，但是這不是容器，這是很不幸的百分比最大高度，要去工作了我需要。

來源

2012-12-04 RedKnight91

好了，所以這裏的答案（我的一個同事幫我這一個）：

的.container應該有一個固定的寬度，或者如果它是一個％的高度它應該在一個超高容器內具有固定高度，並且固定器的高度可以成功設置爲100％。

就是這樣！感謝所有貢獻的人。 Here's a jsFiddle的結果。

這裏的HTML：

<div class="superContainer"> 
    <div class="container"> 
     <a href="#"> 
      <img src="http://placehold.it/250x500" alt="img" /> 
     </a> 
    </div> 
</div>

和這裏的CSS：

.superContainer { height: 200px; } 
.container { width: 30%; height: 50%; background: red; font-size: 0; } 
.container a { display: block; width: 100%; height: 100%; background: orange; opacity: 0.7; } 
.container a img { opacity: 0.7; }

很抱歉，如果答案不適合您的需求，但我需要一個非常特殊的情況下，。我最終會用這種方法上傳我的jQuery插件！

來源

2012-12-04 14:19:46 RedKnight91

在您的錨點中，您指定了max-height和height屬性。只有一個是必要的。

來源

2012-12-04 11:38:05 Licson

是啊，我知道，我只是表明我已經嘗試了一切：p 編輯JSfiddle只是寬度：100％;和高度：100％; 那仍然不能解決問題。 – RedKnight91

我想你想隱藏的容器內多餘的可視圖像......所以，

嘗試溢出：隱藏在div容器。

http://jsfiddle.net/E6aqZ/2/

.container { max-width: 150px; max-height: 150px; background: red; overflow: hidden }

來源

2012-12-04 12:25:53

不，我不想隱藏溢出，我希望錨是它的容器的確切大小，圖像可以保持這種方式！如果我想隱藏溢出，我會告訴他：p – RedKnight91

含有嵌段錨定圖像從容器溢出的div

回答

相關問題