Afbeelding in bovenbalk responsive (verschillend qua formaat i.v.m. weergave desktop/mobile)

    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);
    }
    }

  • Guest, wil je besparen op je domeinnamen? (ad)

    Je kunt je afvragen of je deze afbeelding wel responsive wilt maken? Mogelijk raken daardoor de verhouding breedte vs hoogte verstoord?


    Bij een "normale" afbeelding zou je een dimensie kunnen weglaten en enkel width 100% opgeven, ik zou het anders ook niet weten, want de hoogte staat met een onbekende breedte simpelweg niet vast...


    Ik zou het probleem uit de weg gaan als je het niet op kunt lossen, oftewel verzin een constructie waarbij je niet tegen dit probleem aanloopt. In zekere zin zijn je breedtes nog steeds hardcoded op grond van de breekpunten in je responsive design, ik zou daar dan gebruik van maken, op een gegeven moment zul je toch op een of andere manier een breedte ( en hoogte, als dat er toe doet -maar ALS dat er toe doet is dat meestal een verkeerde oplossing :)) moeten bepalen, 100% flexibel wordt het nooit...

    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?

    Volgens mij zijn er zat manieren om afbeeldingen te "resizen", als ik google op "css image scale" geven de resultaten genoeg inspiratie.


    Wanneer je gewone afbeeldingen gebruikt kun je mogelijk deze oplossing gebruiken, en als het achtergrondafbeeldingen betreft kun je mogelijk iets doen moet de CSS property background-size (google: css background stretch).


    Zoek en probeer eens wat uit, voorbeelden te over.

    Als ik jouw was zou ik eens naar background-size in css gaan kijken. Het mooi laten scalen van images doe je door background-size: cover; of background-size: contain; te gebruiken. Verschilt een beetje per situatie wat je nodig hebt.


    Je kunt door middel van css ook een min-height meegeven. Dat voorkomt dat het te klein wordt.


    voorbeeld:


    CSS
    #balkboven
{

    Succes ermee!

    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;
    }

Participate now!

Heb je nog geen account? Registreer je nu en word deel van onze community!

Maak een account aan Login