Image

object-fit

.imgCover

.imgFill

.imgContain

.imgScale

<div class="grid3 grid6M grid12S gutter center">
    <div>
        <p><code>.imgCover</code></p>
        <div class="ratio16-9">
            <img class="imgCover" src="https://framework.surikat.fr/0.2/web/images/wallpapers/portrait.jpg">
        </div>
    </div>
    <div>
        <p><code>.imgFill</code></p>
        <div class="ratio16-9">
            <img class="imgFill" src="https://framework.surikat.fr/0.2/web/images/wallpapers/portrait.jpg">
        </div>
    </div>
    <div>
        <p><code>.imgContain</code></p>
        <div class="ratio16-9">
            <img class="imgContain" src="https://framework.surikat.fr/0.2/web/images/wallpapers/portrait.jpg">
        </div>
    </div>
    <div>
        <p><code>.imgScale</code></p>
        <div class="ratio16-9">
            <img class="imgScale" src="https://framework.surikat.fr/0.2/web/images/wallpapers/portrait.jpg">
        </div>
    </div>
</div>

Image ronde

Image carré

Image rectangulaire

<div class="grid4 grid6M grid12S flexAround gutterXXL center">
    <div>
        <p>Image carré</p>
        <img class="rounded" src="https://framework.surikat.fr/0.2/web/images/wallpapers/square.jpg">
    </div>
    <div>
        <p>Image rectangulaire</p>
        <div class="ratio1-1">
            <img class="imgCover rounded" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg">
        </div>
    </div>
</div>

Image parallax

imgParallax

<div class="height50 imgParallax" style="background-image: url('https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg');">
    <p class="fs30 white positionCenter">imgParallax</p>
</div>

imgOpacity

.imgOpacity0

.imgOpacity10

.imgOpacity20

.imgOpacity30

.imgOpacity40

.imgOpacity50

.imgOpacity60

.imgOpacity70

.imgOpacity80

.imgOpacity90

.imgOpacity100

<div class="grid3 grid4L grid6M grid12S gutter center">
    <div><p><code>.imgOpacity0</code></p><img class="imgOpacity0" src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg"></div>
    <div><p><code>.imgOpacity10</code></p><img class="imgOpacity10" src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg"></div>
    <div><p><code>.imgOpacity20</code></p><img class="imgOpacity20" src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg"></div>
    <div><p><code>.imgOpacity30</code></p><img class="imgOpacity30" src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg"></div>
    <div><p><code>.imgOpacity40</code></p><img class="imgOpacity40" src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg"></div>
    <div><p><code>.imgOpacity50</code></p><img class="imgOpacity50" src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg"></div>
    <div><p><code>.imgOpacity60</code></p><img class="imgOpacity60" src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg"></div>
    <div><p><code>.imgOpacity70</code></p><img class="imgOpacity70" src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg"></div>
    <div><p><code>.imgOpacity80</code></p><img class="imgOpacity80" src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg"></div>
    <div><p><code>.imgOpacity90</code></p><img class="imgOpacity90" src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg"></div>
    <div><p><code>.imgOpacity100</code></p><img class="imgOpacity100" src="https://framework.surikat.fr/0.2/web/images/wallpapers/01.jpg"></div>
</div>

imgGrayscale

.imgGrayscale0

.imgGrayscale10

.imgGrayscale20

.imgGrayscale30

.imgGrayscale40

.imgGrayscale50

.imgGrayscale60

.imgGrayscale70

.imgGrayscale80

.imgGrayscale90

.imgGrayscale100

<div class="grid3 grid4L grid6M grid12S gutter center">
    <div><p><code>.imgGrayscale0</code></p><img class="imgGrayscale0" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgGrayscale10</code></p><img class="imgGrayscale10" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgGrayscale20</code></p><img class="imgGrayscale20" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgGrayscale30</code></p><img class="imgGrayscale30" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgGrayscale40</code></p><img class="imgGrayscale40" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgGrayscale50</code></p><img class="imgGrayscale50" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgGrayscale60</code></p><img class="imgGrayscale60" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgGrayscale70</code></p><img class="imgGrayscale70" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgGrayscale80</code></p><img class="imgGrayscale80" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgGrayscale90</code></p><img class="imgGrayscale90" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgGrayscale100</code></p><img class="imgGrayscale100" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
</div>

imgBlur

.imgBlur0

.imgBlur10

.imgBlur20

.imgBlur30

.imgBlur40

.imgBlur50

.imgBlur60

.imgBlur70

.imgBlur80

.imgBlur90

.imgBlur100

<div class="grid3 grid4L grid6M grid12S gutter center">
    <div><p><code>.imgBlur0</code></p><img class="imgBlur0" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgBlur10</code></p><img class="imgBlur10" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgBlur20</code></p><img class="imgBlur20" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgBlur30</code></p><img class="imgBlur30" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgBlur40</code></p><img class="imgBlur40" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgBlur50</code></p><img class="imgBlur50" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgBlur60</code></p><img class="imgBlur60" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgBlur70</code></p><img class="imgBlur70" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgBlur80</code></p><img class="imgBlur80" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgBlur90</code></p><img class="imgBlur90" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
    <div><p><code>.imgBlur100</code></p><img class="imgBlur100" src="https://framework.surikat.fr/0.2/web/images/wallpapers/02.jpg"></div>
</div>