Skip to content

Instantly share code, notes, and snippets.

@hieu-tn

hieu-tn/use_img_as_a_background_instead_of_background-image.html

Last active October 30, 2019 07:24
Show Gist options
  • Save hieu-tn/516db1b5ee97fff71d9454f4ec337d92 to your computer and use it in GitHub Desktop.
Save hieu-tn/516db1b5ee97fff71d9454f4ec337d92 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
use_img_as_a_background_instead_of_background-image.html
<html>
<head>
<style>
.thumbnail{
position: relative;
overflow: hidden;
padding-bottom: 56%;
}
.thumbnail img{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
min-width: 100%; min-height: 100%;
object-fit: cover; /* if you are not sure about your assets */
/* z-index: -1; */
}
</style>
</head>
<body>
<figure class="thumbnail">
<img src="path_to_image" width="container_width" height="container_height" alt="">
</figure>
<p><strong>Please note that one of our friends, IE11, does not support "object-fit" CSS. You can use <a href="https://github.com/fregante/object-fit-images">"object-fit-polyfill"</a> in order to fix this issue.</strong></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment