Skip to content

Instantly share code, notes, and snippets.

@simbasounds
Last active November 9, 2017 19:49
Show Gist options
  • Save simbasounds/ad5e9758385a1562f0c4977514499d50 to your computer and use it in GitHub Desktop.
Save simbasounds/ad5e9758385a1562f0c4977514499d50 to your computer and use it in GitHub Desktop.
Dynamic Image Scaling with Smartphone Landscape Exception
/*
* Dynamic Image Scaling with Smartphone Landscape Exception
* ----------------------------------------------------------
* Pic fits screen.
* Except on smartphone landscape,
* where it fills the width, and
* overflows the height.
*/
img.dynamic-size {
height: auto;
width: auto;
max-width: 100%;
}
img.dynamic-size.centered-image {
display: block;
margin: 0 auto;
}
/*
* The max-height is the full height of the page
* Minus the combined height of page elements
* that take up vertical space,
* including any "padding" you'd like to add
*/
@media (min-height: 480px) {
img.dynamic-size {
max-height: calc(100vh - 128px);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment