Hallo allemaal,

ik heb een vraag over hoe ik de afbeelding in mijn bovenbalk responsive kan maken, dit bij het gebruik van 2 verschillende formaten afbeeldingen.

Bij gebruik van 1 afbeelding is het geen probleem, omdat ik dan de code gebruik van width: 100%; en height: auto; Bij 2 afbeeldingen werkt dit helaas niet.

Hieronder de code hoe ik nu wel 2 verschillende afbeeldingen krijg bij het verkleinen van het scherm van desktop naar mobile formaat, maar deze afbeeldingen zijn helaas niet responsive...

wie heeft een idee om deze afbeeldingen wél responsive te krijgen?

Html:
<div id="balkboven">
</div>

CSS:
#balkboven {
width: 100%;
height: 519px;
background-repeat: no-repeat;
background-image: url(../afbeeldingen/kopfa.jpg);
}

@media screen and (max-width: 450px) {
#balkboven{
background-repeat: no-repeat;
background-image: url(../afbeeldingen/kopfaphone2.jpg);
}
}

Je hebt gelijk FangorN dat de verhoudingen wat worden verstoord bij het verkleinen van de responsive afbeelding, dat betreft dan meer de tekst/logo -in de bovenbalk- dat op een gegeven moment te klein wordt om nog duidelijk te lezen, dat is ook de reden waarom ik bij het mobile formaat een andere – meer ingezoomde- afbeelding wil laten zien

Hieronder de code waarmee ik de kopafbeelding prima kan laten meeschalen met elke verkleining, maar deze wordt dus uiteindelijk teveel verkleind.

Html:
<div id="balkboven"><imgsrc="afbeeldingen/kopfa.jpg" align="bottom"alt="home" style="width: 100%; max-width: 100%; height:auto;"></a>
</div>

CSS:
#balkboven {
width: 100%;
}

Daarnaast weet ik hoe je de afbeelding via CSS responsive kan maken (zie code hieronder),

Html:
<div id="balkboven">
<img src="afbeeldingen/kopfa.jpg" width="1280"height="519">
</div>

CSS:
img {
width: 100%;
height: auto;
}

…maar dit werkt dus niet meer als je meerdere afbeeldingen (aangepast aan formaat beeldscherm) in de bovenbalk wilt laten verschijnen.
Zodra je dus de afbeelding(en) volledig in CSS plaats is er geen ‘afbeeldingresponsive’ meer mogelijk/voor elkaar te krijgen… zoals blijkt in de code hieronder:

Html:
<divid="balkboven">
</div>

CSS:
#balkboven {
width: 100%;
height: 519px;
background-repeat:no-repeat;
background-image:url(../afbeeldingen/kopfa.jpg);
}

@media screen and(max-width: 450px) {
#balkboven{
background-repeat:no-repeat;
background-image:url(../afbeeldingen/kopfaphone2.jpg);
}

SAMENGEVAT:
*Afbeelding responsive d.m.w code in de Html pagina= Gaat goed.
*Afbeelding volledig met code in CSS pagina= Gaat op zich goed maar afbeelding is dan niet responsive te krijgen.

Is mijn conclusie juist, of weet misschien iemand een oplossing?

Stijnhau: wat kan ik dan als alternatief uitproberen als een afbeelding in svg beschikbaar zou zijn?

Daar kan ik wat mee FangorN, ik ben nu bezig e.e.a uit te proberen, goede tip!

Stijnhau: aha duidelijk wat je bedoelt!

FangorN bedankt voor je meedenken het is gelukt!

bedankt voor je reactie en tips diestro, ik ben van plan om daar binnenkort ook eens mee te gaan puzzelen ;)!

Nu heb ik het opgelost (d.m.v. bovenstaande tip van FangorN)op de volgende manier:

Html:
<div class="image-full"></div>

CSS:
.image-full{
height: 319px;
width: 100%;
max-width: 1280px;
margin: auto;
background: url(../afbeeldingen/kop.jpg) no-repeat;
background-size: cover;
background-position: center center;
}