Skip to content

Instantly share code, notes, and snippets.

@CarmenScholte

CarmenScholte/fixed-ratio-centered-cover-image.html

Created October 7, 2019 06:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CarmenScholte/44795428e31e062855148db683246540 to your computer and use it in GitHub Desktop.
Save CarmenScholte/44795428e31e062855148db683246540 to your computer and use it in GitHub Desktop.
Download ZIP
fixed-ratio-centered-cover-image
Raw
fixed-ratio-centered-cover-image.html
<!doctype html>
<html>
<head>
<style>
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
}
.background {
min-height: 100%;
min-width: 100%;
width: 1%;
height: 1%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container">
<img class="background" src="https://images.unsplash.com/photo-1529264978834-666a0e99f884?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment