Image

Images play an essential role in web design, enhancing content visually. Amazium provides simple classes for floating images and responsive scaling to ensure they adapt well to different layouts and screen sizes.

Float Support – Align images to the left or right with automatic margins.
Full-Width Scaling – Make images fully responsive to their container.
Media Support – Easily make videos responsive with a wrapper class.

Floating Images

You can float an image left or right using img--left or img--right. The appropriate margins are applied automatically to maintain spacing.

Image on Left

The image floats left, and the text wraps around it on the right.

blank image Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

<img src="" class="img--left">

Image on Right

The image floats right, and the text wraps around it on the left.

<img src="" class="img--right">

Full-Width Images

To make an image 100% width of its parent container, use img--max. This ensures the image scales responsively while maintaining its aspect ratio.

The image width will adjust dynamically to fit its container.
Height is automatically set to maintain proportions.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<img src="" class="img--max">

Responsive Media (Videos & Iframes)

To make videos or embedded content 100% responsive, wrap them inside a <div> with the class media.

<div class="media">
  <iframe src="video_link_here" frameborder="0"></iframe>
</div>

The embedded content (e.g., YouTube or Vimeo videos) will stretch to fit the width of its parent element while maintaining aspect ratio.