php ACF的响应式图像

Posted 2021-05-05

<?php
	$image = get_field('banner_bg_image');
	$medium = $image['sizes'][ 'medium' ];
	$large = $image['sizes'][ 'large' ];
	$full = $image[ 'url' ];
?>
<style>
@media screen and (min-width: 1024px) {
	.banner--interior {
		background-image: url(<?php echo $full; ?>);
	}
}

@media screen and (min-width: 801px) and (max-width: 1024px) {
	.banner--interior {
		background-image: url(<?php echo $large; ?>);
	}
}
@media screen and (max-width: 800px) {
	.banner--interior {
		background-image: url(<?php echo $medium; ?>);
	}
}
</style>