爲什麼我的css容器不工作？

我試圖在我的圖像周圍放一個容器來控制圖像的高度。爲什麼我的css容器不工作？

出於某種原因，我的容器css高度不起作用。這是一段時間，因爲我需要使用CSS，所以我有點生疏。

我正在用angularjs創建一個離子應用程序。這就是爲什麼代碼對你們中的一些人看起來可能有點奇怪，但是多餘的代碼不應該對css產生影響。

我有可能一codepen獲得幫助別人回答我的問題：http://codepen.io/beefman/pen/eNMgzG

這裏是我的代碼 HTML：

<ion-view view-title="Gallery" align-title="center"> 

<ion-content class="center" ng-controller="photoCtrl" ng-init="getImages()"> 
    <div class="row" ng-repeat="image in images" ng-if="$index % 3 === 0"> 
     <div id="container" class="col col-25" ng-if="$index < images.length"> 
      <img class="image" ng-src="{{images[$index].src}}"/> 
     </div> 
     <div class="col col-25" ng-if="$index + 1 < images.length"> 
      <img class="image" ng-src="{{images[$index + 1].src}}" /> 
     </div> 
     <div class="col col-25" ng-if="$index + 2 < images.length"> 
      <img class="image" ng-src="{{images[$index + 2].src}}" /> 
     </div> 
     <div class="col col-25" ng-if="$index + 2 < images.length"> 
      <img class="image" ng-src="{{images[$index + 2].src}}"/> 
     </div> 
    </div> 
</ion-content> 
</ion-view>

CSS：

.center { 
    margin: 0 auto; 
} 

#container { 
    overflow: hidden; 
    height: 100%; 
} 

.image { 
    height: 100%; 
    width: 100%; 
}

來源

2015-07-11 smither123

你之後的實際結果是什麼？ – Patrick

使圖像的高度與寬度相同。 – smither123

@ smither123所以...你想伸展他們？我覺得這不太可能被認爲是最好的演示文稿。如果將它們更改爲背景圖像，您可能可以在零縮放下進行一些自動居中裁剪。 – Katana314

不能使用height: 100%除非父元素也有它。所以我不會推薦實際使用它。使用javascript將高度設置爲100％會更容易，這不需要父級也具有height: 100%。

更新：你不能像這樣使用任何％值。更好的解決方案是讓內容擴展容器，而不是在容器上設置固定值。

來源

2015-07-11 19:50:00 Chrillewoodz

我希望容器中的高度達到25％。我只是用100％作爲例子來表明它沒有做任何事情。我應該仍然使用JavaScript將其設置爲25％？ – smither123

@ smither123你完全可以不使用％。所以是的，你應該或者只是讓內容擴展容器。 – Chrillewoodz

我如何讓內容擴展容器？ – smither123

爲什麼我的css容器不工作？

回答

相關問題