css 智能手机景观异常的动态图像缩放

Posted 2021-05-13

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