Image

There are no notes for this item.

{% if ratio %}
  <div class="image-wrapper" data-ratio="{{ ratio }}">
{% endif %}
<img
  src="{{ src }}"
  alt="{{ alt_text }}"
  {% if modifier %}
    class="{{ modifier }}"
  {% endif %}
/>
{% if ratio %}
  </div>
{% endif %}
<div class="image-wrapper" data-ratio="8:5">
      <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="Image alt text" />
  </div>
{
  "src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
  "alt_text": "Image alt text",
  "ratio": "8:5"
}
  • Content:
    img {
      max-width: 100%;
      height: auto;
    }
    
    .image-wrapper {
      position: relative;
      padding-bottom: calc(100% / 8 * 5); // Default ratio 8:5
      background: no-repeat center center color('dark-gray', -5) url('#{$styleguide-dir}/img/stock/placeholder.svg');
      background-size: 5rem;
    
      &[data-ratio='1:1'] {
        padding-bottom: 100%;
      }
    
      &[data-ratio='4:1'] {
        padding-bottom: calc(100% / 4 * 1);
      }
    
      img {
        position: absolute;
        width: 100%;
      }
    }
    
  • URL: /components/raw/image/_image.scss
  • Filesystem Path: components/21-atoms/image/_image.scss
  • Size: 461 Bytes