Last active
November 9, 2017 19:49
-
-
Save simbasounds/ad5e9758385a1562f0c4977514499d50 to your computer and use it in GitHub Desktop.
Dynamic Image Scaling with Smartphone Landscape Exception
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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