Voor achtergrond images gebruik in gewoonlijk een media query op de volgende wijze:

.call-to-action
{
	background-image: url(/images/widget_photos/mobile/<?= $call_to_action['photo']; ?>)		
}
@media only screen and (min-width: 992px)
{
	.call-to-action
	{
		background-image: url(/images/widget_photos/desktop/<?= $call_to_action['photo']; ?>)	
	}		
}


Hoe doe iets gelijks voor een image die daadwerkelijk in de pagina staat:

<img src="/images/photos/thumbnails/<?= $gallery_thumbnail['photo']; ?>" class="img-fluid">
Voor een masthad zou ik gewoon de CSS route nemen. Dat is netter & eenvoudiger.

In mijn geval ging het om productfoto's. Die ga je sowieso al niet allemaal in je CSS zetten, en ik had ook geen zin om alle mogelijke formaten uit te gaan schrijven.

De artikelen+foto's worden nu via ajax geladen. De screen.width geef ik dan mee in die request, en daarmee genereer dus in PHP een foto URL met de breedte van het scherm er al in. De "auto-thumb-resizer" pakt dan uiteindelijk wel de grootte die daar het best bij past.
Masthad?

Reageren