画像の高さを制御するために、画像の周りにコンテナを配置しようとしています。
何らかの理由で、コンテナの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%;
}
height: 100%親要素にも含まれていないと使用できません。したがって、実際に使用することはお勧めしません。javascriptを使用して高さを100％に設定する方がはるかに簡単です。これにより、親にもが必要になりませんheight: 100%。
更新：このような％値は使用できません。より良い解決策は、コンテナーに固定値を設定するのではなく、コンテンツにコンテナーを展開させることです。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加