How can I make `ion-img` responsive? - css

Question

I am using ion-img inside a virtualScroll element.
The image is HD resolution and I want to scale it down for device widths. I thought ion-img took care of this with its CSS properties, but it does not.
So, setting no width or height on the ion-img means I get a 20x20 grey square.
Setting a width and height of 1920x1080 means I get a huge image on most devices that goes way off screen.
How can I set this to be responsive? I want it to scale with the screen. I can easily do this with a standard img by setting width to 100%.
Below is my code:
<ion-header>
<ion-navbar>
<ion-title>{{ selectedCategory.name }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list [virtualScroll]="selectedCategory.videos" approxItemHeight="300px" approxItemWidth="100%">
<ion-item class="class" *virtualItem="let item; let i=index" padding>
<div *ngIf="item.available != true; then locked; else unlocked"></div>
<ng-template #unlocked>
<div class="video">
<ion-img [src]="item.poster_image_s3" (click)="play(item.video_s3)"></ion-img>
</div> <!-- .video -->
<p class="title"
(click)="play(item.video_s3)"
[ngStyle]="{'color': '#' + selectedCategory.color_hex_code }">
<svg-icon src="assets/img/icons/play-button.svg"
[ngStyle]="{
'fill': '#' + selectedCategory.color_hex_code
}"></svg-icon>
Watch Demo
</p>
<p class="subtitle">{{ item.name }}</p>
</ng-template> <!-- #unlocked -->
<ng-template #locked>
<div class="video">
<div class="locked">
<img src="assets/img/icons/studio-locked.svg" alt="Locked" class="icon">
</div> <!-- .locked -->
<ion-img [src]="item.poster_image_s3"></ion-img>
</div> <!-- .video -->
<p class="title">
Subscribe to Watch
</p>
<p class="subtitle">{{ item.name }}</p>
</ng-template> <!-- #locked -->
</ion-item> <!-- .class -->
</ion-list>
</ion-content>