JKCSS Images
Basic Images
This is the Images of this JKCSS-Framework. So Basic HTML Image Tag is following
<img src="" alt="">
According to Above code the src="" is the path of image
And the Text on the alt="" will be display when iamge path is incurrent or image missing
According to the JKCSS the base class of the image is .jk-img
<img src="path of the image" alt=JKCSS Image class=jk-img>
You have to set the image path on the "path of the image"
Image Sizes
This section is the size of the Image
- small Image Size jk-img sm
- Medium Image Size jk-img md
- Large Image Size jk-img lg
<img src="path of the image" alt="JKCSS Image" class="jk-img lg">
<img src="path of the image" alt="JKCSS Image" class="jk-img md">
<img src="path of the image" alt="JKCSS Image" class="jk-img sm">
<img src="path of the image" alt="JKCSS Image" class="jk-img md">
<img src="path of the image" alt="JKCSS Image" class="jk-img sm">
Image Border Radious
This section is the Border Radious of the Image
- Border Radious 2px jk-img rounded-2
- Border Radious 4px jk-img rounded-4
- Border Radious 8px jk-img rounded-8
- Border Radious 12px jk-img rounded-12
- Border Radious 16px jk-img rounded-16
- Border Radious 20px jk-img rounded-20
- Border Radious 30px jk-img rounded-30
- Border Radious 40px jk-img rounded-40
- Border Radious 50px jk-img rounded-50
- Border Radious 100px jk-img rounded-100
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-2">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-4">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-8">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-12">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-16">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-20">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-30">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-40">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-50">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-100">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-4">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-8">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-12">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-16">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-20">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-30">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-40">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-50">
<img src="path of the image" alt="JKCSS Image" class="jk-img rounded-100">
Alignment of Images
This is the Alignment of the Images
Following are the class of the Image Alignment
IMPORTANT :: Before use the Image Alignment You have to use flex class Example:
<div class="flex justify-between">
...
</div>
...
</div>
- Justify content between justify-between
- Justify content end justify-end
- Justify content start justify-start
- Justify content even justify-even
- Justify content around justify-around
- Justify content left justify-left
- Justify content right justify-right
- Justify content center justify-center