mastorsCDN Image Classes Documentation

Demo Description Code & Action
Square

.square

width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 5px;
 
<img src="image.jpg" class="img square">
Circle

.circle

width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 50%;
 
<img src="image.jpg" class="img circle">
Widescreen

.widescreen

width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 5px;
 
<img src="image.jpg" class="img widescreen">
Photo

.photo

width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 5px;
 
<img src="image.jpg" class="img photo">
Classic

.classic

width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 5px;
 
<img src="image.jpg" class="img classic">
Contain

.fit-contain

object-fit: contain;
 
<img src="image.jpg" class="img photo fit-contain">
Cover

.fit-cover

object-fit: cover;
 
<img src="image.jpg" class="img photo fit-cover">
Fill

.fit-fill

object-fit: fill;
 
<img src="image.jpg" class="img photo fit-fill">
Scale Down

.fit-scale-down

object-fit: scale-down;
 
<img src="image.jpg" class="img photo fit-scale-down">
No Round

.no-round

border-radius: 0;
 
<img src="image.jpg" class="img square no-round">
Border

.border

border: 1px solid #ccc;
 
<img src="image.jpg" class="img square border">
Center

.center

object-position: center;
 
<img src="image.jpg" class="img photo fit-contain center">
Top

.top

object-position: top;
 
<img src="image.jpg" class="img photo fit-contain top">
Bottom

.bottom

object-position: bottom;
 
<img src="image.jpg" class="img photo fit-contain bottom">
Full Width

.w-full

width: 100%
 
<img src="image.jpg" class="img w-full">
Auto Width

.w-auto

width: auto;
 
<img src="image.jpg" class="img w-auto">
Full Height

.h-full

display: inline-block;
height: 100%;
 
<img src="image.jpg" class="img h-full">
Auto Height

.h-auto

height: auto;
 
<img src="image.jpg" class="img h-auto">

.res-logo

position: relative;
width: auto;
height: 2rem;
aspect-ratio: 1;
img {
  height: inherit;
  width: inherit;
  aspect-ratio: 1;
  object-fit: contain;
}
 
<img src="image.jpg" class="res-logo">
Inherit

.img-i

width: inherit;
height: inherit;                   
<img src="image.jpg" class="img-i">
Width Inherit

.img-w-i

width: inherit;                  
<img src="image.jpg" class="img-w-i">
Height Inherit

.img-h-i

height: inherit;                  
<img src="image.jpg" class="img-h-i">
Square

.img-ar-1-1, .img-ar-1, .img-ar-square

aspect-ratio: 1 / 1;                  
<img src="image.jpg" class="img-ar-1-1">
Rounded

.img-rounded

border-radius: 8px;                  
<img src="image.jpg" class="img-rounded">
Responsive

.img-responsive

max-width: 100%;
height: auto;
display: block;                    
<img src="image.jpg" class="img-responsive">