Bij de lay-out van mijn website zit er een padding van 80px zowel links als rechts van de afbeelding. Nu wil ik graag dat de afbeelding over de volledige breedte komt. Nu kan ik de padding van 80px niet weghalen, want die is nodig voor de tekst onder en boven de afbeelding. Iemand enig idee hoe ik de afbeelding over de volledige breedte kan krijgen?

Ik heb zelf al het volgende geprobeerd:

Code:

margin-left: -80px;
max-width: 880px;

Dit werkt als de website op volledige grootte is. Het probleem is echter dat in responsive de afbeelding niet de goede plaats heeft en/of te groot is. Nu kan ik dat voor elke schermgrootte goed gaan instellen, maar dat is nogal veel werk en ik vroeg me af of er een all-in-one oplossing is. Iemand enig idee?

Ik snap het probleem niet precies, ik neem aan dat width: 100%; height: auto; display: block; padding: 80px 0; moet werken.

Hier een afbeelding:



De afbeelding moet over de volledige breedte komen, dus over de witte ruimte links en rechts.

Zie mijn code.

Dat werkt niet. De padding van 80px zit in de css van het artikel. De afbeelding zit in het artikel. De padding op 0 zetten voor de afbeelding werkt dus niet. Daarom heb ik 'margin-left: -80px;' dus geprobeerd en dan 'max-width: 880px;' en dat werkt wel, maar dan moet ik in responsive bij elke schermgrootte dit goed gaan instellen. Iemand enig idee met een oplossing die voor elke schermgrootte goed zou moeten werken?

Heb je een link o.i.d., zo is dit lastig te bekijken en dus oplossen.

Ik heb je een pm gestuurd.

Prima, hiermee lukt het:

width: calc(100% + 160px);
margin-left: -80px;
max-width: none;

Echter, dit werkt enkel op full-width schermen (dus waarbij de container ook echt 880px is. Je moet nu voor elke mediaquery die er is even de margin-left aanpassen en de width, ik neem aan dat dat kan. Als het een percentagebreedte is dan wordt het lastig.. dan kun je het best met jQuery de margin-left en width berekenen a.d.h.v. de breedte van de container en de padding.

Bedankt Chiel. Dit lijkt goed te werken. Ik zal even kijken of dit voor responsive ook gaat werken.

Ja, ik heb het nu voor elke schermgrootte passend gekregen. Bedankt voor de hulp Chiel.