8 berichten aan het bekijken - 1 tot 8 (van in totaal 8)
  • Q:

    Bijdrager
    Hasoweh

    Afbeeldingen mobiele website retina

    Hallo,

    Ik ben opzoek naar het antwoord op de vraag: Hoe maak je afbeeldingen op voor een retina beeldscherm? Momenteel werk ik aan een mobiele website. Nu is het probleem waar ik tegenaan loop dat een div 100 x 60 pixels is. Als ik daar de afbeelding in plaats met exact dezelfde afmeting is de afbeelding gewoon niet scherp.

    Hoe zorg ik er nu voor dat de afbeelding met een resolutie eens zo hoog (200 x 120) toch past binnen de 100 x 60 pixels div? Ik hoop dat het nog enigszins duidelijk is;! .

    Resolutie 2x Resolutie 1x


    Bijdrager
    Plainey

    Persoonlijk gebruik ik voor situaties als deze Retina.js (http://retinajs.com/)

    Het zal ongetwijfeld anders kunnen, maar dit werkt gewoon prima.:)


    Bijdrager
    Domtoren

    Kan ook gewoon via css attribute in de img tag: style=’width:100px; height:60px;’


    Bijdrager
    Hasoweh

    Super bedankt! Het is gelukt met retina js, makkelijker kan niet.


    Bijdrager
    Wyodor

    Het vertonen van retina afbeeldingen doe je door media queries.

    De afbeeldingen worden gebruikt als achtergrond.

    <style type=”text/css”>

    .shape_0 {
    background: url(‘images/shape_0.png’) no-repeat;
    }

    @media only screen and (-moz-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {

    .shape_0 {
    background: url(‘images/shape_0@2x.png’) no-repeat;
    background-size: 803px 229px;
    }

    }

    </style>

    <div class=”shape_0″ style=”height:229px;width:803px;”></div>

    http://stephen.io/mediaqueries/
    http://www.paulund.co.uk/ios-media-queries-boilerplate

    Meer als je zoekt naar :

    http://www.google.nl/search?q=retina+media+queries


    Bijdrager
    Hasoweh

    Als ik het goed begrijp pas je dan de verhouding van de afbeelding in de div aan?


    Bijdrager
    Wyodor

    Voor de afbeelding die je toont, zou je ook een Scalable Vector Graphic (.svg) kunnen overwegen.

    Schaalt traploos naar elke grootte. En je kan ‘m in een < img > element gebruiken.

    Ik heb geen Retina apparaat, maar ik gok dat het er zo uit kan zien:

    http://responsive.2kool4u.net/tech/svg/


    Bijdrager
    Shmoo

    Ik ben een voorstander van Zurb’s Interchange omdat het gewoon erg natuurlijk werkt als je Media Queries begrijpt. Daarnaast is het niet alleen een afbeelding switcher zoals de meeste ‘Retina’ scriptjes online voor het tonen van wel of geen Retina afbeeldingen aan de hand van X gegevens maar het is een content switcher op basis van X gegevens. Je kan het dus ook gebruiken op een DIV om bijv. drie verschillende embeds ( Google Maps, -/YouTube ) te tonen aan de hand van X gegevens.

    http://zurb.com/playground/foundation-interchange

    Nadeel is wel dat het allen nog maar onderdeel is van Zurb’s Foundation Framework. Dus als je zoals ik geen liefhebber bent van Frameworks zoals Bootstrap, Foundations en de rest van de kermis dan zal je dit onderdeel er even uit moeten slopen om het te gebruiken.

8 berichten aan het bekijken - 1 tot 8 (van in totaal 8)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.