为什么我的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容器不工作？

回答

相关问题