Images

Responsive images, thumbnails, and rounded image utilities for controlling how images render across breakpoints.

Responsive Images

Apply .velin-img-fluid to make images scale with their parent container. It sets max-width: 100% and height: auto.

<img src="https://picsum.photos/800/400" class="velin-img-fluid" alt="Responsive image">

Image Thumbnails

Add .velin-img-thumbnail for a bordered, padded appearance — ideal for gallery previews and profile images.

<img src="https://picsum.photos/200/200" class="velin-img-thumbnail" alt="Thumbnail" width="200">

Rounded Images

Use .velin-img-rounded for soft border-radius corners on an image.

<img src="https://picsum.photos/300/200" class="velin-img-rounded" alt="Rounded image" width="300">

Aligning Images

Combine image classes with float or flexbox utilities for alignment.

<!-- Centered via margin auto -->
<img src="https://picsum.photos/300/150" class="velin-img-fluid velin-img-rounded velin-d-block velin-mx-auto" alt="Centered">

<!-- Floated -->
<img src="https://picsum.photos/150/150" class="velin-img-rounded velin-float-start velin-me-3" alt="Float start" width="150">
<p>Text wraps around the floated image…</p>