イメージをイオンカードでサイズ変更

Question

以下の説明で画像のセットを表示します。私はイオンカードを使うことにしました。 私はこの結果を得た（最初の画像）：

私は私が今持っている同じレイアウトを維持し、説明を追加したいものの

。ここで

は私のコードです：

<ion-content ng-controller="cityController"> 

    <div class="row"> 

     <div class="col col-33"> 
     <div class="list card"> 
     <div class="item item-body"> 
      <img class="full-image"src="img/images/opera.jpg"/> 
      This is a "Facebook" styled Card.. 
     </div> 
     </div> 
     </div> 

     <div class="col col-33"> 
      <img src="img/images/basilique.jpg"/> 
     </div> 
     <div class="col col-33"> 
      <img src="img/images/hoteldeville.jpg"/> 
     </div> 
    </div> 


    .center { 
    text-align: center; 

} 

.col { 

    overflow: hidden; 
} 

.row { 

    overflow: hidden; 
    height: 180px; 
} 

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

どのように私はこの問題を解決することができますか？

UPDATE

Answer 1

あなたはあなたのソースを少し変更する必要があります。 例HTML：

<div class="row"> 

    <div class="col col-33"> 
      <img class="full-image" src="http://www.w3schools.com/css/img_fjords.jpg"/> 
      <div class="card-description">This is a "Facebook" styled Card..</div> 
    </div> 
    <div class="col col-33"> 
    <img class="full-image" src="http://www.w3schools.com/css/img_forest.jpg"/> 
    <div class="card-description">This is a "Facebook" styled Card..</div> 
    </div> 
    <div class="col col-33"> 
    <img class="full-image" src="http://www.w3schools.com/css/img_mountains.jpg"/> 
    <div class="card-description">This is a "Facebook" styled Card..</div> 
    </div> 
</div> 

例CSS：

.col-33 { 
    width: 33%; 
    float:left; 
} 

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

.card-description { 
    text-align: center; 
} 

ライブデモhere これは、それが動作する方法を一例に過ぎません。

UPDATE：

サイズのフルイメージを持っている、あなたはそれの上に記述を配置する必要があります。 その場合は、このCSSが必要です。

.col-33 { 
    width: 33%; 
    float:left; 
    position: relative; 
} 

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

.card-description { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    text-align: center; 
    padding: 5px; 
    line-height: 1.5; 
    background-color: rgba(255, 255, 255, 0.6); 
}