Set image within ion-grid column. i.e. 50% of total height of the page Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) The Ask Question Wizard is Live! Data science time! April 2019 and salary with experienceHow to define height of a container by an element within that containerHow can I make Bootstrap columns all the same height?Using bootstrap to create grid with “dynamic” image sizingmake image fit height of bootstrap 3 gridFill remaining vertical space with CSS using display:flexflexbox columns with resizable imageBootsrap col-md-3 GRID max-width pixel size?Cannot display HTML stringsetting the height of an image within a flex-wrap elementSetting ion-row vertical weights
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
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
The Ask Question Wizard is Live!
Data science time! April 2019 and salary with experienceHow to define height of a container by an element within that containerHow can I make Bootstrap columns all the same height?Using bootstrap to create grid with “dynamic” image sizingmake image fit height of bootstrap 3 gridFill remaining vertical space with CSS using display:flexflexbox columns with resizable imageBootsrap col-md-3 GRID max-width pixel size?Cannot display HTML stringsetting the height of an image within a flex-wrap elementSetting ion-row vertical weights
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
.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 asked Mar 8 at 15:17
SampathSampath
32.9k19142244
|
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 asked Mar 8 at 15:17
SampathSampath
32.9k19142244
useheight: 100vh;instead ofheight: 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 asked Mar 8 at 15:17
SampathSampath
32.9k19142244
.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 html css
angular sass ionic4 asked Mar 8 at 15:17
SampathSampath
32.9k19142244
asked Mar 8 at 15:17
SampathSampath
32.9k19142244
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
32.9k19142244
useheight: 100vh;instead ofheight: 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
useheight: 100vh;instead ofheight: 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
use
height: 100vh; instead of height: 100%;– Temani Afif
Mar 8 at 15:22
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
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
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
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
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
1 Answer
1
active
oldest
votes
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;
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
);
);
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
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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;
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;
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;
answered Mar 8 at 17:06
SampathSampath
32.9k19142244
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;
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
answered Mar 8 at 17:06
SampathSampath
32.9k19142244
32.9k19142244
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
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
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
use
height: 100vh;instead ofheight: 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