Image

Classic Image



<img src="assets/images/magic_grid/magic_grid_default_01.jpg" alt="">

Image Alignment

For alignment you can use these classes:

  • .float-none-sq - to reset alignment
  • .float-left-sq - left align
  • .float-right-sq - right align


<img class="float-right-sq" src="assets/images/magic_grid/magic_grid_default_01.jpg" alt="">

Image Wrapper

Image Wrapper is a special container that stretches the image to fill the container but keeping the image ratio.

In our example, .article-sample-box class is the one that defines the width and height of the container. ( w:300px; h:400px )


<div class="image-relative article-sample-box">
    <div class="image-wrapper">
        <div class="image-inner">
            <img class="image-sq" src="assets/images/magic_grid/magic_grid_default_01.jpg" alt="">
        </div>
    </div>
</div>

Sample 02 - without .image-relative


<div style="position:relative; width:100%; height:333px;">
    <div class="image-wrapper">
        <div class="image-inner">
            <img class="image-sq" src="assets/images/magic_grid/magic_grid_default_01.jpg" alt="">
        </div>
    </div>
</div>

image wrapper module is used in several theme areas: