object-fit value demo

object-fit

by allen Yu

HTML

<h1> object-fit </h1>
<div class="demo">
  <div class="list">
    <strong>object-fit: fill</strong>
    <div class="box">
      <img src="https://source.unsplash.com/random/400x350" class="fill">
    </div>
  </div>
  <div class="list">
    <strong>object-fit: contain</strong>
    <div class="box">
      <img src="https://source.unsplash.com/random/400x350" class="contain">
    </div>
  </div>
  <div class="list">
    <strong>object-fit: cover</strong>
    <div class="box">
      <img src="https://source.unsplash.com/random/400x350" class="cover">
    </div>
  </div>
  <div class="list">
    <strong>object-fit: none</strong>
    <div class="box">
      <img src="https://source.unsplash.com/random/400x350" class="none">
    </div>
  </div>
  <div class="list">
    <strong>object-fit: scale-down</strong>
    <div class="box">
      <img src="https://source.unsplash.com/random/400x350" class="scale-down">
    </div>
  </div>

  <div class="clear">
    <strong>The image original size</strong>
    <p><img src="https://source.unsplash.com/random/400x350"></p>
  </div>
</div>

CSS

.demo {
  padding: 10px;
}

.box {
  width: 180px;
  height: 180px;
  margin: 10px 0 20px;
  background-color: #beceeb;
  overflow: hidden;
  resize: both;
}

.box>img {
  width: 100%;
  height: 100%;
  background-color: #433ea9;;
}

.list {
  margin-right: 20px;
  float: left;
}

.clear {
  padding-top: 30px;
  clear: both;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}