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

Question

我想显示一组图像，并在下面添加描述。我选择使用 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%;
}

我该如何解决这个问题？

更新

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 这只是它如何工作的一个示例。

更新:

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