Images Styling with CSS

Ionic Framework ionic-v3
1

Hello

i decided to convert a existing Angular2 application to IONIC 2

there are some issues i am facing, the elements on the screen i am controling using CSS at first and then will add the actual IONIC tag

i have a basic image and am trying to set its width and height like this

.feed_post_photo {
float: left;
height: 40px;
margin-right: 30px;
width: 40px;
}

the HTML is this

<img  class="feed_post_photo_img" src="{{ImageURL}}" >

thh image for some reason is still coming out to be 100px

can you please help me on what might be causing this?

Thanks in advance

2

Is that your actual code? If it is, your class is feed_post_photo_img but your CSS references feed_post_photo.

1 Like
3

Copy paste error. the issue still is there

This is not working

<img  class="feed_post_photo_img" src="{{ImageURL}}" >

.feed_post_photo {
float: left;
height: 40px;
margin-right: 30px;
width: 40px;
}

.feed_post_photo_img{
border: 1px solid #07e5d8;
border-radius: 50%;
box-shadow: 0 0 2px #000;
height: 100%;
width: 100%;
}

Thanks in advance :slight_smile:

4

this editor in the support ticket is not lettin my div get in

above the image there is a div

div class=“feed_post_photo”
->img class=“feed_post_photo_img” src="{{ImageURL}}" >

feed_post_photo {
float: left;
height: 40px;
margin-right: 30px;
width: 40px;
}

.feed_post_photo_img{
border: 1px solid #07e5d8;
border-radius: 50%;
box-shadow: 0 0 2px #000;
height: 100%;
width: 100%;
}

Appreciate your help!

1 Like
5

You only have to use the </> button to format your text as coded - then the <div> will be displayed, too.

6

ok here is the code which is not working


  <div class="feed_post_photo">
    
    <img  class="feed_post_photo_img" src="{{ImageURL}}" >
  </div>
  <div class="feed_post_user">
    <div class="feed_post_user_name">{{Name}}</div>
    <div class="feed_post_date">{{PostDate| date:'medium'}} </div>
  </div>

The image is not proprly sizing with the CSS


  <div class="feed_post_photo">
    
    <img  class="feed_post_photo_img" src="{{ImageURL}}" >
  </div>
  <div class="feed_post_user">
    <div class="feed_post_user_name">{{Name}}</div>
    <div class="feed_post_date">{{PostDate| date:'medium'}} </div>
  </div>

Please can someone help

7 
.feed_post_photo {
  float: left;
  height: 40px;
  margin-right: 30px;
  width: 40px;
}

.feed_post_photo_img{
     border: 1px solid #07e5d8;
    border-radius: 50%;
    box-shadow: 0 0 2px #000;
    height: 100%;
    width: 100%;
}
8

Also @SaeedAnsari,

In case you don’t know, Ionic use a mix of Angular, Bootstrap to make ready-to-use UI Components for both Android and iOS later when you actually build the files.

So, actually, and you may have noticed that

html works, but is not following any normal grid or adaptable structure in CSS/SCSS.

This is because Ionic 2 uses a pre-renderer to any platform, before any output rendering. You can’t resize an image in Ionic by CSS because:

  1. Ionic doesnt control after a cordova plugin is involved (for pictures for example)
  2. Silently it applies a bootstrap grid to every element in the app. So if you want to use custom CSS/ SCSS, use class (it doesn’t always works because Ionic has overrides with UI components), but it’s 100% cross platform, hence the why Ionic is so good.

On the flip side for example, you should switch this

structure to a
It’s very flexible and you can put everything in it.

Same for …

Because it will auto generate the html that is ok, and cleaner. Please have a look at components docs at

This will be for Ionic 2, not the new Ionic 3.

Hope that helps,