css - 调整 ionic 卡中的图像大小

我想显示一组图像，并在下面进行描述。我选择使用离子卡。
我得到了这个结果（第一张图片）：



我想保留现在的布局，并添加说明。

这是我的代码：

 <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%;
}

我怎样才能解决这个问题？

更新

最佳答案

您必须稍微更改源。
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
这只是它如何工作的一个示例。

更新：

要使图像具有完整尺寸，您需要在其上放置说明。
在这种情况下，此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);
}