De parent id is bij 150X250
De span child is 500X900
Wat ik wil dat er geen witruimte is in de parent met een overlow:hidden in css, waarbij de child img het plaatje vergroot, zodat alles in de parent bedekt word.
De ratio moet verder niet gewijzigd worden.
@Jan: Ik heb er eerlijk gezegd niet over nagedacht. Ik ken de situatie niet en ik weet niet wat de TS wil bereiken. Gaat het om (wisselende) content afbeeldingen? Een productoverzicht, een gallery? Of gaat het inderdaad om een illustratieve achtergrondafbeelding? Pas als je dat weet kun je bepalen wat een passende oplossing is. Een auto is een auto, maar een auto om boodschappen mee te doen in de binnenstad van Amsterdam, is een andere auto dan die waarmee je door de woestijn gaat scheuren of waarmee je gaat meedoen met de Formule 1. Pas als je de precieze bedoeling ergens van kent, kun je een zinvol passend antwoord geven.
Er zijn ook content-afbeelding oplossingen (bijv met srcset) maar in mijn dagelijkse werk kies ik ik meestal toch liever deze richting, ook omdat het veel makkelijker is ivm responsive design. @Ozzie: eens dat het semantisch niet helemaal perfect is, maar als ik dit zie (voorbeeld van mdn web docs):
<img
srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy" />
dan zie je dat de breakpoints dus hard in je HTML staan, en ik heb ze toch liever als een variabele/mixin in mijn SCSS files, voor flexibiliteit.
Anyway, de OP heeft nu een oplossing en daar ging het ons allemaal om ;-)
Ik zeg niet dat een background-image per definitie fout is. Wat ik probeer te zeggen is dat een background-image niet in alle gevallen passend is. Denk bijv. aan een overzichtspagina met daarop 25 producten. Lijkt me raar als je dan al die productafbeeldingen via inline-style als background-image gaat plaatsen. Een background-image is wat het is, een achtergrondafbeelding, meestal deel uitmakend van een vaste lay-out. Als het gaat om (variabele) content/inhoud dan lijkt het me niet passend.
Maar goed, zolang Daniël niet meer informatie geeft, valt er weinig over te zeggen.
Hetzelfde probleem kun je op meerdere manieren oplossen. Wil je dat een auto minder hard rijdt? Plaats drempel, stoplichten of leg spijkermatten neer. Welke oplossing de juiste is hangt af van de situatie ;-)
In dit geval was er initieel geen sprake van een background-image. Er is nu (mogelijk) een oplossing aangedragen die eigenlijk niet helemaal past bij het initiële probleem.
