Make ion-col resize to img size

Ionic Framework ionic-v3
1

I’m trying to create a layout of ion-img inside ion-col but the images are getting cut, how can I make then fit without using specific height for every screen size

	<ion-card>
		<ion-card-header text-wrap>
			Estadio Ebal Rodrigues - Sabado, 27 de agosto
		</ion-card-header>
		<ion-card-content>
			<ion-grid>
				<ion-row>
					<ion-col col-5>
						<ion-img width="100%" height="100%" src="./assets/img/Santos.png"></ion-img>
					</ion-col>
					<ion-col col-2>
						<h1>
							VS
						</h1>
					</ion-col>
					<ion-col col-5>
						<ion-img width="100%" height="100%" src="./assets/img/Municipal Grecia.png"></ion-img>
					</ion-col>
				</ion-row>
			</ion-grid>
		</ion-card-content>
	</ion-card>

af
af.PNG325×573 53.1 KB

This is how it’s being displayed

2

<ion-img> is specifically only for use with virtual scroll. Don’t use it outside of that context.

3

My advice : try to rework your code with ion-list, ion-item, and customize CSS according to needs.
Your code is not bad, but ion-grid is not made to be put inside a ion-card.

If you have to make a ion-grid, do it rather that way:

<ion-item>
<ion-grid>
				<ion-row>
					<ion-col col-5>
						<ion-img width="100%" height="100%" src="./assets/img/Santos.png"></ion-img>
					</ion-col>
					<ion-col col-2>
						<h1>
							VS
						</h1>
					</ion-col>
					<ion-col col-5>
						<ion-img width="100%" height="100%" src="./assets/img/Municipal Grecia.png"></ion-img>
					</ion-col>
				</ion-row>
			</ion-grid>
</ion-item>

Hope it helps :slight_smile:

4

I don’t recall ever seeing anything indicating that.

6

It’s not in the docs, but I talk from experience @rapropos.

7

Yeah, I’m going to need a bit more than vague claims of “experience” before I believe that. I think putting grids inside of cards is a perfectly reasonable design.

8

I’m just trying to help @rapropos. Put that in a ionic app, you’ll see (we were talking about html layout).

1 Like
9

Using regular HTML <img> made the Trick, Thank you very much @rapropos

1 Like
10

i tried this and it works so good thank u