Getting Started
Layout
Components
Design
Image
Make your images responsive with our classes:
- Image responsive:
In this class, the image height is set to auto, allowing it to scale with its width, while the maximum width is set to 100% of its parent container. This ensures the image stays within its parent and adapts to the available space. By setting the image width to 100%, the aspect ratio is maintained as it stretches to fit the parent container's width.
<img class="null-image-responsive" src="" alt="" title=""/>- Image size:
To have same width and height to style your avatar on your website you can use the classes below:
| Class Name | Description |
|---|---|
| .null-image-size-16x16 | Set the height of the image to 16 pixels and the width to 16 pixels |
| .null-image-size-32x32 | Set the height of the image to 32 pixels and the width to 32 pixels |
| .null-image-size-64x64 | Set the height of the image to 64 pixels and the width to 64 pixels |
| .null-image-size-128x128 | Set the height of the image to 128 pixels and the width to 128 pixels |
| .null-image-size-256x256 | Set the height of the image to 256 pixels and the width to 256 pixels |
| .null-image-size-512x512 | Set the height of the image to 512 pixels and the width to 512 pixels |
- Image circle:
To make your image look as a circle, use the '.null-image-circle' class, it will give border radius 50% to the image:
<img class="null-image-circle" src="" alt="" title=""/>