Skip to content

Instantly share code, notes, and snippets.

@rotassator
Last active May 13, 2019 04:25
Show Gist options
  • Save rotassator/5e87a88df034d64d718b to your computer and use it in GitHub Desktop.
Save rotassator/5e87a88df034d64d718b to your computer and use it in GitHub Desktop.
CSS: centre and crop an image with a fixed height
/* Centre and crop an image with a fixed height */
.crop {
position: relative; /* provide a positioning context */
overflow: hidden;
height: 200px; /* make space */
}
.crop img {
position: absolute;
left: -100%; /* anchor the image corners outside the viewable area (increase for large images) */
right: -100%;
top: -100%;
bottom: -100%;
width: auto; /* dynamic width based on viewable area */
height: 200px; /* set height (swap these for variable height) */
margin: auto; /* centre the image */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment