Images | Romo

Default Styles

All images have some basic styling that removes any border and auto scales down to fit their containers.

"F16A FAP linksup KC-10". Licensed under Public domain via Wikimedia Commons.

Optional classes

`.romo-img-{rounded|circle|card}`

Add these classes to an <img> element to add optional styling.

<img src="..." class="romo-img-rounded">
<img src="..." class="romo-img-circle">
<img src="..." class="romo-img-card">

`.romo-img{0-3}`

Add these classes to adjust height.

<img src="..." class="romo-img0">
<img src="..." class="romo-img1">
<img src="..." class="romo-img2">
<img src="..." class="romo-img3">

Use to align with inline text.

Img0, text0, middle

Img1, text1, middle

Img2, text2, middle

Img3, text3, middle

Img0, text3, middle

Img3, text0, middle

"F16A FAP linksup KC-10". Licensed under Public domain via Wikimedia Commons.

<div>
  <img class="romo-img0 romo-align-middle" src="...">
  <span class="romo-text0 romo-align-middle">Img0, text0, middle</span>
</div>
<div>
  <img class="romo-img1 romo-align-middle" src="...">
  <span class="romo-text1 romo-align-middle">Img1, text1, middle</span>
</div>
<div>
  <img class="romo-img2 romo-align-middle" src="...">
  <span class="romo-text2 romo-align-middle">Img2, text2, middle</span>
</div>
<div>
  <img class="romo-img3 romo-align-middle" src="...">
  <span class="romo-text3 romo-align-middle">Img3, text3, middle</span>
</div>
<div>
  <img class="romo-img0 romo-align-middle" src="...">
  <span class="romo-text3 romo-align-middle">Img0, text3, middle</span>
</div>
<div>
  <img class="romo-img3 romo-align-middle" src="...">
  <span class="romo-text0 romo-align-middle">Img3, text0, middle</span>
</div>

Or use .romo-img-inline to manually vertically align text that isn’t inline with an image.

Img3, text1

<div class="romo-row romo-push0-bottom">
  <div class="romo-span romo-2-24 romo-align-right romo-pad0-right">
    <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/F16A_FAP_linksup_KC-10.jpg"
         class="romo-img3">
  </div>
  <div class="romo-span romo-3-24 romo-text1">
    <span class="romo-img-inline3">Img3, text1</span>
  </div>
  <div class="romo-span romo-offset-19-24"></div>
</div>