Add styling to images.
<img class="o-image" src="https://orangecss.com/images/thumbnails/cat.jpg" alt="Katze" />
<a href="#" class="o-image"><img src="https://orangecss.com/images/thumbnails/fox.jpg" alt="Foxy" /></a>
<img class="o-image o-image--shadow" src="https://orangecss.com/images/thumbnails/hedgehog.jpg" alt="Hedgy" />
<img class="o-image o-image--rounded" src="https://orangecss.com/images/thumbnails/square/cat-square.jpg" alt="Katze" />
<a href="#" class="o-image o-image--size-small o-image--rounded o-image--action">
<img src="https://orangecss.com/images/thumbnails/hedgehog.jpg" alt="Hedgy" />
</a>
<img class="o-image o-image--circle" src="https://orangecss.com/images/thumbnails/square/dog-square.jpg" alt="Doggo" />
<a href="#" class="o-image o-image--size-small o-image--circle o-image--action"><img src="https://orangecss.com/images/thumbnails/square/fox-square.jpg" alt="Foxy" /></a>
Default - auto size
Extra small - 60px
Small - 120px
Medium - 240px
Large - 480px
<img class="o-image" src="https://orangecss.com/images/thumbnails/cat.jpg" alt="Katze" />
<img class="o-image o-image--size-xsmall" src="https://orangecss.com/images/thumbnails/width-60/fox-60.jpg" alt="Foxy" />
<img class="o-image o-image--size-small o-image--action" src="https://orangecss.com/images/thumbnails/width-120/hedgehog-120.jpg" alt="Hedgy" />
<img class="o-image o-image--size-medium" src="https://orangecss.com/images/thumbnails/width-240/dog-240.jpg" alt="Doggo" />
<img class="o-image o-image--size-large" src="https://orangecss.com/images/thumbnails/width-480/hedgehog-480.jpg" alt="Hedgy" />
<div class="grid">
<div class="col-2">
<a href="#" class="o-image o-image--action">
<img src="https://orangecss.com/images/thumbnails/hedgehog.jpg" alt="Hedgy" />
</a>
</div>
<div class="col-2">
<a href="#" class="o-image o-image--action">
<img src="https://orangecss.com/images/thumbnails/cat.jpg" alt="Katze" />
</a>
</div>
<div class="col-2">
<a href="#" class="o-image o-image--action">
<img src="https://orangecss.com/images/thumbnails/square/dog-square.jpg" alt="Katze" />
</a>
</div>
<div class="col-2">
<a href="#" class="o-image o-image--action">
<img src="https://orangecss.com/images/thumbnails/square/fox-square.jpg" alt="Doggo" />
</a>
</div>
<div class="col-2">
<a href="#" class="o-image o-image--circle o-image--action">
<img src="https://orangecss.com/images/thumbnails/square/cat-square.jpg" alt="Katze" />
</a>
</div>
<div class="col-2">
<a href="#" class="o-image o-image--circle o-image--action">
<img src="https://orangecss.com/images/thumbnails/square/hedgehog-square.jpg" alt="Hedgy" />
</a>
</div>
</div>
The structure of HTML is different as additional wrappers are needed to achieve the result. To change size of this images apply class to .image-wrapper
like .o-image-wrapper--size-{size}
<div class="o-image-wrapper">
<div class="o-image">
<img src="https://orangecss.com/images/thumbnails/hedgehog.jpg" alt="Hedgy" />
</div>
</div>
<div class="o-image-wrapper o-image-wrapper--size-xsmall">
<div class="o-image">
<img src="https://orangecss.com/images/thumbnails/hedgehog.jpg" alt="Hedgy" />
</div>
</div>
<div class="o-image-wrapper o-image-wrapper--size-small">
<div class="o-image o-image--circle">
<img src="https://orangecss.com/images/thumbnails/width-240/hedgehog-240.jpg" alt="Hedgy" />
</div>
</div>
<div class="o-image-wrapper o-image-wrapper--size-medium">
<div class="o-image o-image--circle">
<img src="https://orangecss.com/images/thumbnails/width-480/hedgehog-480.jpg" alt="Hedgy" />
</div>
</div>
<div class="grid">
<div class="col-2">
<div class="o-image-wrapper">
<a href="#" class="o-image o-image--rounded o-image--action">
<img src="https://orangecss.com/images/thumbnails/width-240/fox-240.jpg" alt="Foxy" />
</a>
</div>
</div>
<div class="col-2">
<div class="o-image-wrapper">
<a href="#" class="o-image o-image--rounded o-image--action">
<img src="https://orangecss.com/images/thumbnails/width-240/cat-240.jpg" alt="Katze" />
</a>
</div>
</div>
<div class="col-2">
<div class="o-image-wrapper">
<a href="#" class="o-image o-image--circle o-image--action">
<img src="https://orangecss.com/images/thumbnails/square/hedgehog-square.jpg" alt="Hedgy" />
</a>
</div>
</div>
<div class="col-2">
<div class="o-image-wrapper">
<a href="#" class="o-image o-image--size-large o-image--circle o-image--action">
<img src="https://orangecss.com/images/thumbnails/square/dog-square.jpg" alt="Doggo" />
</a>
</div>
</div>
</div>
Attribute | Description | Possible values | Type | Required | Default |
---|---|---|---|---|---|
shadow | Throw a shadow | .o-image--shadow | String | - | - |
rounded | Add $o-border-radius-main (3px) border radius | .o-image--rounded | String | - | - |
circle | Add 100% border radius | .o-image--circle | String | - | - |
action | Add hover effect | .o-image--action | String | - | - |
size | Set with .o-image--size-{size} , if you are using any dimension image you need to set it as .o-image-wrapper--size-{size} | xsmall , small , medium , large | String | - | - |