Repsitioning Images within a Card

Ionic Framework ionic-v3
1

Hi,

This comes after a whole days effort at fixing this. I have a card list displaying images and text.

There are two types of images

  1. where image height > width
  2. Image width > height.

image
Screenshot.jpg1080×1920 322 KB

I have no problem with the second. But with my first when I try to display the image after resizing it it sticks to the left side. I have pretty much tried every trick I know in css nothing seems to work. Please be advised I am not a expert in CSS.

One promising trick was to use transform: translateX(50pxs). But the problem I face is that I dont know if its 50 px or 100 px because that value will change for each image. Also I have two different kind of images here Landscape and Portrait. I dont want this rule being applied on the Landscape mode.

I also looked at compass for sass to use @if. But could not figure out how to select the different CSS settings based on the images actual width and length.

Can some one suggest how to get the images width and height after resizing and apply CSS rules based on these values.

It needs to be something like this.

img.classname {

@if width>height{
max-height: 200px;
max-width: 100%;
width:auto;
height:auto;
transform: translateX(0px);

 }

else
{
max-height: 200px;
max-width: 100%;
width:auto;
height:auto;
transform: translateX((((max-width)-width)/2)-(width/2));
}

Thanks and regards.
SD

2

What are you trying to accomplish? That Name1 looks like Name2?

3

I’m assuming your question is how to align the images in the center…

  img.classname {
    display: block;
    margin-left: auto;
    margin-right: auto
  }
2 Likes
4

@AaronSterling I wanted the image to be centered in the card and not to stick to the left side.

5

@elvis_gn Hey Mate. Thank you. That worked like a charm. You my friend are a saviour.

Cheers mate.