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

<h2>At Dimensions : 260px*200px</h2>
<figure>
  <img class="first" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/motorcycle.jpg" />
  <figcaption>Original</figcaption>
</figure>
<figure>
  <img class="first contain" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/motorcycle.jpg" />
  <figcaption><code>contain Mode</code></figcaption>
</figure>

<h2>At Dimensions : 260px*400px</h2>
<figure>
  <img class="second" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/motorcycle.jpg" />
  <figcaption>Original</figcaption>
</figure>
<figure>
  <img class="second contain" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/motorcycle.jpg" />
  <figcaption><code>contain Mode</code></figcaption>
</figure>
body {
  text-align: center;
}

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;
}

.contain {
  object-fit: contain;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.