<h1>The <code>object-fit</code> Property : Fill</h1>

<h2>At Dimensions : 260px*200px</h2>
<figure>
  <img class="first" src="http://t.imgbox.com/j8aQ81zq.jpg" />
  <figcaption>Original</figcaption>
</figure>
<figure>
  <img class="first fill" src="http://t.imgbox.com/j8aQ81zq.jpg" />
  <figcaption><code>fill Mode</code></figcaption>
</figure>

<h2>At Dimensions : 260px*400px</h2>
<figure>
  <img class="second" src="http://t.imgbox.com/j8aQ81zq.jpg" />
  <figcaption>Original</figcaption>
</figure>
<figure>
  <img class="second fill" src="http://t.imgbox.com/j8aQ81zq.jpg" />
  <figcaption><code>fill Mode</code></figcaption>
</figure>

body {
  text-align: center;
  padding-bottom: 20px;
}

h2 {
  margin-top: 50px;
}

figure {
  position: relative;
  display:inline-block;
  margin:0; 
}

figcaption {
  position: absolute;
  top: 10px;
  left: 10px;
  background: black;
  color: white;
  padding: 5px 10px;
}

.first {
  width: 260px;
  height: 200px;
  background: red;
}

.second {
  width: 260px;
  height: 400px;
  background: yellow;
}

.fill {
  object-fit: fill;
}