Ufdjrw

How does modal jazz use chord progressions?

How to market an anarchic city as a tourism spot to people living in civilized areas?

Unexpected result with right shift after bitwise negation

Strange behaviour of Check

Can a non-EU citizen traveling with me come with me through the EU passport line?

Area of a 2D convex hull

Why is "Captain Marvel" translated as male in Portugal?

Can I add database to AWS RDS MySQL without creating new instance?

AWS IAM: Restrict Console Access to only One Instance

What do I do if technical issues prevent me from filing my return on time?

Is drag coefficient lowest at zero angle of attack?

How does the Nova's Burn power work at the 7-9 level?

How can you insert a "times/divide" symbol similar to the "plus/minus" (±) one?

What computer would be fastest for Mathematica Home Edition?

What do you call the holes in a flute?

Blender game recording at the wrong time

Mortgage adviser recommends a longer term than necessary combined with overpayments

Stop battery usage [Ubuntu 18]

Slither Like a Snake

Are my PIs rude or am I just being too sensitive?

Why is there no army of Iron-Mans in the MCU?

Need a suitable toxic chemical for a murder plot in my novel

Single author papers against my advisor's will?

Is it possible to ask for a hotel room without minibar/extra services?

Set image within ion-grid column. i.e. 50% of total height of the page

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

.html

<ion-content class="content">
 <ion-grid>
 <ion-row class="row1">
 <ion-col size="12">
 <ion-img [src]="data?.path" class="image"></ion-img>
 </ion-col>
 </ion-row>
 <ion-row class="row2"> 

 </ion-row>
 </ion-grid>
</ion-content>

.scss

.content 
 ion-grid 
 display: flex;
 flex-direction: column;
 height: 100%;
 
 .row1 
 flex: 1;
 
 .row2 
 flex: 1;
 
 ion-img 
 max-width: 100%;
 max-height: 100%;
 

result

Q: I need to contain the image within 50% level. But it does not work like that. But without an image, it is working fine. i.e. It keeps 50% top and bottom section. Any clue?

I tried this:

 ion-img 
 max-width: 100%;
 max-height: 100%;
 

Debug:

html css angular sass ionic4

share|improve this question

edited Mar 8 at 15:38

Sampath

asked Mar 8 at 15:17

SampathSampath

32.9k19142244

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  use height: 100vh; instead of height: 100%;
  
  – Temani Afif
  Mar 8 at 15:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Like so? ion-img max-width: 100%; height: 100vh; @TemaniAfif
  
  – Sampath
  Mar 8 at 15:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  no, for the ion-grid
  
  – Temani Afif
  Mar 8 at 15:26
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  nevermind, it seems not an issue, but your HTML isn't enough to know this
  
  – Temani Afif
  Mar 8 at 15:27
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  yes, you have the same output as here, so using vh will not fix your issue. I thought it was related to the use of % ... there is also a lot of nested element which make this a bit tricky. try adding max-height:100% to the parent element of the image
  
  – Temani Afif
  Mar 8 at 15:35
  

  
  
  
  

 | 
show 6 more comments

0

.html

<ion-content class="content">
 <ion-grid>
 <ion-row class="row1">
 <ion-col size="12">
 <ion-img [src]="data?.path" class="image"></ion-img>
 </ion-col>
 </ion-row>
 <ion-row class="row2"> 

 </ion-row>
 </ion-grid>
</ion-content>

.scss

.content 
 ion-grid 
 display: flex;
 flex-direction: column;
 height: 100%;
 
 .row1 
 flex: 1;
 
 .row2 
 flex: 1;
 
 ion-img 
 max-width: 100%;
 max-height: 100%;
 

result

Q: I need to contain the image within 50% level. But it does not work like that. But without an image, it is working fine. i.e. It keeps 50% top and bottom section. Any clue?

I tried this:

 ion-img 
 max-width: 100%;
 max-height: 100%;
 

Debug:

html css angular sass ionic4

share|improve this question

edited Mar 8 at 15:38

Sampath

asked Mar 8 at 15:17

SampathSampath

32.9k19142244

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  use height: 100vh; instead of height: 100%;
  
  – Temani Afif
  Mar 8 at 15:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Like so? ion-img max-width: 100%; height: 100vh; @TemaniAfif
  
  – Sampath
  Mar 8 at 15:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  no, for the ion-grid
  
  – Temani Afif
  Mar 8 at 15:26
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  nevermind, it seems not an issue, but your HTML isn't enough to know this
  
  – Temani Afif
  Mar 8 at 15:27
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  yes, you have the same output as here, so using vh will not fix your issue. I thought it was related to the use of % ... there is also a lot of nested element which make this a bit tricky. try adding max-height:100% to the parent element of the image
  
  – Temani Afif
  Mar 8 at 15:35
  

  
  
  
  

 | 
show 6 more comments

.html

<ion-content class="content">
 <ion-grid>
 <ion-row class="row1">
 <ion-col size="12">
 <ion-img [src]="data?.path" class="image"></ion-img>
 </ion-col>
 </ion-row>
 <ion-row class="row2"> 

 </ion-row>
 </ion-grid>
</ion-content>

.scss

.content 
 ion-grid 
 display: flex;
 flex-direction: column;
 height: 100%;
 
 .row1 
 flex: 1;
 
 .row2 
 flex: 1;
 
 ion-img 
 max-width: 100%;
 max-height: 100%;
 

result

Q: I need to contain the image within 50% level. But it does not work like that. But without an image, it is working fine. i.e. It keeps 50% top and bottom section. Any clue?

I tried this:

 ion-img 
 max-width: 100%;
 max-height: 100%;
 

Debug:

html css angular sass ionic4

share|improve this question

edited Mar 8 at 15:38

Sampath

asked Mar 8 at 15:17

SampathSampath

32.9k19142244

<ion-content class="content">
 <ion-grid>
 <ion-row class="row1">
 <ion-col size="12">
 <ion-img [src]="data?.path" class="image"></ion-img>
 </ion-col>
 </ion-row>
 <ion-row class="row2"> 

 </ion-row>
 </ion-grid>
</ion-content>

.content 
 ion-grid 
 display: flex;
 flex-direction: column;
 height: 100%;
 
 .row1 
 flex: 1;
 
 .row2 
 flex: 1;
 
 ion-img 
 max-width: 100%;
 max-height: 100%;
 

 ion-img 
 max-width: 100%;
 max-height: 100%;
 

html css angular sass ionic4

html css angular sass ionic4

share|improve this question

edited Mar 8 at 15:38

Sampath

asked Mar 8 at 15:17

SampathSampath

32.9k19142244

share|improve this question

edited Mar 8 at 15:38

Sampath

asked Mar 8 at 15:17

SampathSampath

32.9k19142244

asked Mar 8 at 15:17

SampathSampath

32.9k19142244

asked Mar 8 at 15:17

SampathSampath

32.9k19142244

1 Answer
1

active

oldest

votes

0

Plain ima element works for below css. But the same css doesn't work with ion-img. Maybe shadow dom issue or something else.

Note: If you know a better solution please put it.

.html

<img [src]="data?.path" class="image" />

.scss

 .image 
 height: 250px;
 width: 340px;
 

share|improve this answer

answered Mar 8 at 17:06

SampathSampath

32.9k19142244

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55066139%2fset-image-within-ion-grid-column-i-e-50-of-total-height-of-the-page%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Plain ima element works for below css. But the same css doesn't work with ion-img. Maybe shadow dom issue or something else.

Note: If you know a better solution please put it.

.html

<img [src]="data?.path" class="image" />

.scss

 .image 
 height: 250px;
 width: 340px;
 

share|improve this answer

answered Mar 8 at 17:06

SampathSampath

32.9k19142244

add a comment | 

0

Plain ima element works for below css. But the same css doesn't work with ion-img. Maybe shadow dom issue or something else.

Note: If you know a better solution please put it.

.html

<img [src]="data?.path" class="image" />

.scss

 .image 
 height: 250px;
 width: 340px;
 

share|improve this answer

answered Mar 8 at 17:06

SampathSampath

32.9k19142244

add a comment | 

Plain ima element works for below css. But the same css doesn't work with ion-img. Maybe shadow dom issue or something else.

Note: If you know a better solution please put it.

.html

<img [src]="data?.path" class="image" />

.scss

 .image 
 height: 250px;
 width: 340px;
 

share|improve this answer

answered Mar 8 at 17:06

SampathSampath

32.9k19142244

<img [src]="data?.path" class="image" />

 .image 
 height: 250px;
 width: 340px;
 

share|improve this answer

answered Mar 8 at 17:06

SampathSampath

32.9k19142244

answered Mar 8 at 17:06

SampathSampath

32.9k19142244

answered Mar 8 at 17:06

SampathSampath

32.9k19142244