Image cover sizing classes
Image sizing classes can be used to size and crop images to set dimensions.
Wrap media entities or images with a HTML div tag and add the following class img-cover-[number] this number can be: 100,200,300,400,500 or 600. e.g. img-cover-200
<div class="img-cover-200"></div>
The example of the below media entity is using the img-cover-100 class
<div class="img-cover-100"> <drupal-media data-align="center" data-entity-type="media" data-entity-uuid="78de011d-0b86-4842-b28b-3add6ec58969" data-view-mode="original"></drupal-media> </div>
An .aspect-ratio-[ratio] class can be added as well to change the size of the images height by a ratio of the width(division).
The following classes are available:
aspect-ratio_25 | .aspect-ratio_50 | aspect-ratio_75 (.25,.5,.75)
aspect-ratio_half | .aspect-ratio_third | .aspect-ratio_fourth (2,3,4)
.aspect-ratio_4-3 | .aspect-ratio_5-4 | .aspect-ratio_16-9 | .aspect-ratio_9-16 ( 4/3, 5/4, 16/9, 9/16)
See below example of aspect-ratio-half class adding to img-cover class.
<div class="img-cover-300 aspect-ratio_half">
<drupal-media data-align="center" data-entity-type="media" data-view-mode="original"></drupal-media>
</div>
See below example of aspect-ratio-50(.5) class adding to img-cover class.
<div class="img-cover-300 aspect-ratio_50">
<drupal-media data-align="center" data-entity-type="media" data-view-mode="original"></drupal-media>
</div>