ImgFix
ImgFix
This plugin is specially developed for the Qoduby template. It is extremely simple to use. For example usage, you can review the example below.
This plugin allows an image to be centered according to the width and height of the container it is placed in.
For example, let's say we have a container measuring 200px X 200px
and an image measuring 500px X 300px
. The plugin increases the height of the image to 200px
and places the image in the container by centering it in vertical and horizontal positions.
All you have to do is define the width, height of the container and add the .img-fix
class to the container.
Example
Container: 200px X 200px
Image: 500px X 200px
<div class="img-fix width-200 height-200">
<img src="https://placehold.co/500x300/dcdcfe/5151f9" alt="">
</div>
Rounded Example
Container: 200px X 200px
Image: 500px X 200px
<div class="img-fix width-200 height-200 rounded">
<img src="https://placehold.co/500x300/dcdcfe/5151f9" alt="">
</div>
Circle Example
Container: 200px X 200px
Image: 500px X 200px
<div class="img-fix width-200 height-200 rounded-circle">
<img src="https://placehold.co/500x300/dcdcfe/5151f9" alt="">
</div>