调整离子卡中的图像大小 [英] Resize image in ionic cards

问题描述

我希望在下面显示一组图像。我选择使用Ionic卡。
我得到了这个结果（第一张图片）：

I want display a set of images with a description below. I chose to use Ionic cards. I got this result (the first image):

虽然我想保留现在的相同布局，但添加说明。

While I want to preserve the same layout I have now, and add a description.

这是我的代码：

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

我该如何解决这个问题？

How can I fix this?

更新

推荐答案

你必须稍微改变你的来源。
示例HTML：

You have to change your source little bit. Example 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;
}

现场演示这里
这只是一个如何工作的例子。

Live demo here This is just an example how it can work.

更新

要让图片全尺寸，您需要放置对它的描述。
在这种情况下，这个CSS是必需的。

To have the images full sized, you need to put the description over it. In that case this CSS is required.

.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);
}

这篇关于调整离子卡中的图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！