Question

我试图在我的图像周围放置一个容器来控制图像的高度。

由于某些原因，我的容器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%; 
 }

Answer 1

除非父元素也有height: 100%，否则不能使用height: 100%。所以我不建议实际使用它。使用javascript将高度设置为100％要容易得多，这不需要父级也有{{1}}。

更新：你不能像这样使用任何％值。更好的解决方案是让内容扩展容器，而不是在容器上设置固定值。

为什么我的css容器没有工作？

1 个答案: