uniformThumb

The size of the image doesn't matter, it will fill the shape of the .uniformThumb using object-fit: cover;.

.uniformThumb requires a width and height to be set because it cannot rely on the dimensions of the image. Fortunately, using the aspect- utility only the width dimension has to be explicit.

.uniformThumb.aspect-square

<div class="uniformThumb width-100-px aspect-square">
<img src="https://unsplash.it/200/200/?random" width="200" height="200">
</div>

.uniformThumb.aspect-4x3

<div class="uniformThumb width-100-px aspect-4x3">
<img src="https://unsplash.it/200/200/?random" width="200" height="200">
</div>

.uniformThumb.aspect-2x1

<div class="uniformThumb width-100-px aspect-2x1">
<img src="https://unsplash.it/200/200/?random" width="200" height="200">
</div>

.uniformThumb.aspect-16x9

<div class="uniformThumb width-100-px aspect-16x9">
<img src="https://unsplash.it/200/200/?random" width="200" height="200">
</div>

.uniformThumb.round

<div class="uniformThumb width-100-px aspect-square round overflow-hidden">
<img src="https://unsplash.it/200/200/?random" width="200" height="200">
</div>

.uniformThumb With Placeholder Text

Text 
<div class="uniformThumb width-100-px aspect-4x3">
    <span>Text</span>
</div>

.uniformThumb With Placeholder Icon

<div class="uniformThumb width-100-px aspect-4x3">
    <span>
        <svg class="inline-block" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><path d="M28.998 8.531l-2.134-2.134c-0.394-0.393-1.030-0.393-1.423 0l-12.795 12.795-6.086-6.13c-0.393-0.393-1.029-0.393-1.423 0l-2.134 2.134c-0.393 0.394-0.393 1.030 0 1.423l8.924 8.984c0.393 0.393 1.030 0.393 1.423 0l15.648-15.649c0.393-0.392 0.393-1.030 0-1.423z" fill="#BBFF00"></path></svg>
    </span>
</div>