Square cropping for instafeed.js

readme.markdown

Crop images to square in instafeed.js

Preview

index.html

<h1>Square cropping images</h1>
<p> 2 techniques, useful with <a href="https://github.com/stevenschobert/instafeed.js">Instafeed.js</a>, amongst other things.</p>


<div class="image-boxes">
  <div class="image-box">
    <img src="https://instagram.fmel2-1.fna.fbcdn.net/vp/69d4df6c6e8d6bd852d44ca5e6363d57/5B3986B1/t51.2885-15/e35/25036465_1210383369106751_8835892581469519872_n.jpg"/>
    <span class="caption">Standard Landscape image</span>
  </div>

  <div class="image-box">
    <div class="instafeed-image-square">
      <img src="https://instagram.fmel2-1.fna.fbcdn.net/vp/69d4df6c6e8d6bd852d44ca5e6363d57/5B3986B1/t51.2885-15/e35/25036465_1210383369106751_8835892581469519872_n.jpg"/>
    </div>
    <span class="caption">Square using object-fit</span>
  </div>

  <div class="image-box">
    <div class="instafeed-image-square with-background" style="background-image: url(https://instagram.fmel2-1.fna.fbcdn.net/vp/69d4df6c6e8d6bd852d44ca5e6363d57/5B3986B1/t51.2885-15/e35/25036465_1210383369106751_8835892581469519872_n.jpg)">
    </div>
    <span class="caption">Square using background-size</span>
  </div>
</div>

style.css

.instafeed-image-square {
  position: relative;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
}

.instafeed-image-square img {
  object-fit: cover;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.instafeed-image-square.with-background {
  background-size: cover;
  background-position: center;
}


/* 
These are just styles for the test page 
-------------------------------------------
*/

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}


.image-boxes {
  display: flex;
  flex-direction: row;
}

.image-boxes  > * {
  background: #DDD;
  border: 1px solid #CCC;
  flex: 1;
  margin-right: 1rem;
  position: relative;
}

.image-box > img {
  width: 100%;
}

.image-box .caption {
  position: absolute;
  top: 100%;
  padding-top: 0.5rem
}