1

I have an Ionic 3 app where I display three images in a three column row. Images that are added into these columns can be of any size and thats whats currently causing me issues. With the CSS I have in place all images that are "tall and thin" or "square" are fine however any images that are "short and wide" are causing me some trouble. I would like the images to fill the full square of the column however with the "short and wide" images they are not filling the height correctly. Heres my example:

enter image description here

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

ion-col {
    position: relative;
}

ion-col .card-img-list-item {
    position: relative;
    overflow: hidden;
    padding-top: 100%;
    cursor: pointer;
    border:1px solid #000;
}

ion-col .card-img-list-item img {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
}

<ion-row class="card-img-list row">
  <ion-col class="col">
      <div class="card-img-list-item">
            <img _ngcontent-c0="" src="http://www.slp-photography.com/wp-content/uploads/2017/05/Lake-District-Landscape-Photography-Swirral-Edge-Sunset-Portrait.jpg">
      </div>
  </ion-col>
  <ion-col class="col">
      <div class="card-img-list-item">
            <img _ngcontent-c0="" src="http://www.thinkdunes.com/wp-content/uploads/2016/05/Beach-Cove-1600x500.png">
      </div>
  </ion-col>
  <ion-col class="col">
      <div class="card-img-list-item">
            <img _ngcontent-c0="" src="https://images.on-this.website/4770_16177414785089a40b8a364.jpg">
      </div>
  </ion-col>

</ion-row>

See example here: http://plnkr.co/edit/kAaFNjewMvT43LPddkL8?p=preview

As you can see the middle image is not filling the height of the parent div.

I dont really want to change the structure of the HTML if possible and because of the library I am using to display the images I cant set the image as a background-image in CSS.

I also dont want to change how the other two images are displayed so I would like it to look like this:

enter image description here

Glen Robson
  • 908
  • 2
  • 19
  • 42
  • Try this CSS for the image: height: 100%; min-height: 100%; width:100%; – Sfili_81 Apr 30 '18 at 15:28
  • Thats not quite what im after as it stretches/squashes the image rather than setting it to the center of the parent – Glen Robson Apr 30 '18 at 15:31
  • So you want the image yo fill width and height and be centered in the middle of the parent div? – Adam Apr 30 '18 at 15:40
  • Okay so I want the image to either fill the height (with the width being larger than the parent width) and have the image center horizontally OR have the image fill the width (with the height being larger than the parent height) and have the image center vertically. Hope that makes sense – Glen Robson Apr 30 '18 at 15:48
  • 1
    Your best bet is to use a background image and `background-size: cover` – Adam Jenkins Apr 30 '18 at 15:50
  • 1
    Please check duplicate link, and check the support. It will give result like http://plnkr.co/edit/NFwt3Rl89NsQmdlQsWsF?p=preview – Huangism Apr 30 '18 at 15:54

0 Answers0