Images 1.2.0

Responsive images, thumbnails, and rounded image utilities for controlling how images render across breakpoints.
Read this page in English

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Responsive images with VelinStyle image helpers; always provide meaningful alt (or empty alt for decorative).

When not

Do not use images of text for essential UI copy when real text works.
Do not omit alt on informative images.

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>