Set height in percentage of an element inside ion-content

ionic-v1
1

Hi,

I would like to resize a image to 50% of the screen height inside of a ion-content in my view (so it can adapt to any screen size provided my image is big enough, preventing scrolling). When I set the height of the image in pixel/em (height: xxpx/xxem;), the height of the image is automatically redimensioned, but not when I put the height in percentage. The size in percentage works for the width of the image, but not for its height:

Does somebody has an idea why please?

Thanks.

1 Like
2

Try this out

3

Thanks! It works perfectly.

4

I did it and worked but I got an unexpected scroll… look like has 1 or 2 unwanted pixels.

View:

<ion-view title="Teste">
	<ion-content>
		<img src="//placehold.it/300x300" alt="" />
		<img src="//placehold.it/300x300" alt="" />
	</ion-content>
</ion-view>

CSS

img{
  height: 50% !important;
  display:block;
  width: auto !important;
  
}
.scroll{
  height:100% !important
}

image
print.png847Ă—682 16.8 KB

5

Hmm, you could add this.

.platform-android .scroll-content{
  margin-top: 0;
  margin-bottom:0;
  padding-top:0;
}

One thing to note is that the values that are there are for specific reasons.
And it is only 1-2px, so it may not be worth the trouble of overriding that css.

6

@mhartington “worked” but I got a new issue. When I’m trying to scroll, the page don’t scroll (this is good and is what I wanted) but the scroll bar is showing. Sorry English is not my first language, did you get it?

7

You could do this

::-webkit-scrollbar {
  display: none;
}
8

What about an ion-input field. I’ve been able to do it using pixels but percentages wont work

9

I think a better solution is overflow: visible
https://www.w3schools.com/css/css_overflow.asp

10

There is a property in CSS named vh(Viewport Height), by which you can set the height of an element according to the height of your screen.
For example, let us say, if you want to change the height of the image covering 10% of the screen, then use 10vh. Similarly use 20vh for 20%, 100vh for 100%, and so on.

Therefore, for your requirement, use height: 50vh for the image.

<ion-content padding>
  <img src="https://picsum.photos/400/400" alt="" class="test-image">
</ion-content>


ion-content .test-image {
  display: block;
  margin: 0 auto; // Make the photo center align
  width: auto;    // Adjust the width according to height
  height: 50vh;   // Height = 50% of screen
}

image1

However, if you want to make the height of the image covering 50% of the screen (excluding the header height), then

ion-content .test-image {
  display: block;
  margin: 0 auto; // Make the photo center align
  width: auto;    // Adjust the width according to height
  height: calc(50vh - 56px);   // Height = 50% of screen - header height (56px)
}

image2

11

does any one give me solution for this?
i want this date picker in my ionic app using angular fram workReports