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>