CODEWITHSUNDEEP
cssangularjsimageionic-framework
Hana
Hana

Reputation: 239

Resize image in ionic cards

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

enter image description here

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

Here is my code:

 <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?

UPDATE

picture

Upvotes: 2

Views: 21612

Answers (1)

Jan Franta
Jan Franta

Reputation: 1721

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>

Example 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.

UPDATE:

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

Upvotes: 4

Related Questions