☰
Trongate CSS Docs

Working With Images

Trongate CSS provides simple yet powerful image handling capabilities out of the box. Images are automatically made responsive while maintaining their aspect ratios, ensuring they look great across all devices.

Basic Image Styling

By default, all images in Trongate CSS are responsive. Simply use the standard HTML <img> tag, and Trongate CSS will handle the rest:

Example responsive image

This works because Trongate CSS automatically applies max-width: 100%; and height: auto; to all images, ensuring they scale proportionally within their containers while maintaining aspect ratio.

Image Alignment

Trongate CSS provides several utility classes for controlling image alignment:

Left aligned image
Right aligned image
Center aligned image

Responsive Image Grids

Create flexible image galleries using Trongate's flexbox utilities:

Grid image 1 Grid image 2 Grid image 3

Images in Cards

Images work seamlessly within card components:

Card image example

Images automatically fit within card boundaries while maintaining their aspect ratio.

When working with images in responsive layouts, consider these best practices:

  • Always include meaningful alt text for accessibility.
  • Use appropriate container classes to control maximum image width.
  • Consider using different aspect ratios for different types of content.
  • Test images across different screen sizes to ensure proper scaling.

While Trongate CSS handles responsive image scaling automatically, it's still important to serve appropriately sized images to optimize loading times and performance.