Appendix

Flexbox.website

Object-fit

Object-fit provides us cover and contain control which is similar to background-size. The difference is that background image is a decoration that happens in CSS. Object-fit, on the other hand, applies to <img> tag. An img tag is treated as content and hence it keeps the accessibility.

figure {
  padding: 5px;

  img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  figcaption {
    text-align: center;
  }
}

http://codepen.io/makzan/pen/pvKeOb

You can find the PDF/ePub/Mobi edition at https://leanpub.com/flexbox-website. Buy now and read the book in your favorite reader.