<h1>The <code>object-fit</code> Property : cover</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 cover" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/motorcycle.jpg" />
<figcaption><code>cover 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 cover" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/motorcycle.jpg" />
<figcaption><code>cover 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;
}
.cover {
object-fit: cover;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.