Image Contain Methods

Image Contain Methods

1. Background Image

  <div style="background-image: url('{{ item.image_medium.url }}');"></div>

  div {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
  }


2. Object Contain

    <img src="{{ item.image_medium.url }}" class="" alt="">

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

3. Flexbox

    <a><img src="{{ item.image_medium.url }}" class="" alt=""></a>
    
    a {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    img {
      width: auto;
      max-height: 100%;
      max-width: 100%;
    }