/*
* 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);
}
}