Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

JavaScript Afbeelding aanpassen aan schermresolutie

h4xX0r
7 antwoorden
  • Ik heb op mijn webpagina's soms een afbeelding die ik over bijna de gehele breedte wil hebben, maar dat in verschillende beeldschermresoluties.
    Het is me in HTML niet gelukt, kent iemand een Javascript die de beeldresolutie detecteert (b.v. met availWidth) en daarmee in de tag <img > de juiste afbeelding inlaadt (door b.v. voor de verschillende resoluties verschillende bestanden te hebben: 800image.jpg, 1024image.jpg enz)
  • ff snel:

    denk eens hieraan:

    if screenwidth <600
    document.write(img src plaatjeklein.jpg)….
    else
    bla bla plaatjegroot.jpg…

    t.
  • Met dit advies in mijn achterhoofd nog even wat rondgeneusd op het net, script wat aangepast en het resultaat werd dit:
    <SCRIPT LANGUAGE="JavaScript1.2">
    if (screen.width == 1024) { document.write("<img src='imagerc/cn-pieken.jpg' alt='Classical scenery: limestone mountains in the most fantastic shapes'>"); }
    else if (screen.width < 1000) { document.write("<img src='imagerc/cn-pieken.jpg' width=670 alt='Classical scenery: limestone mountains in the most fantastic shapes'>"); }
    else if (screen.width > 1050) { document.write("<img src='imagerc/cn-pieken.jpg' width=1150 alt='Classical scenery: limestone mountains in the most fantastic shapes'>"); }
    </script>
    Dit geplakt op de plaats waar de tag <IMG SRC> komt. Ik heb dus maar een jpg bestand. De grootte van de getoonde afbeelding pas ik dus aan op de bijna volle breedte (kleiner of groter) door het attribuut width te gebruiken bij de resoluties 800*600 en 1280*1024.
    Werkt zoals ik wilde.
    Bedankt voor het advies.
  • als het idd slechts 1 afbeelding betreft zou je ook kunnen volstaan met een width in %
  • Dat dacht ik eerst ook, maar als de placeholder kleiner is dan het oorspronkelijk beeldbestand (in pixels) dan rekt hij dit toch op en valt dan weer buiten het beeld (met horizontale scrollbalk, die ik niet in mijn website wil hebben).
  • [quote:8baf746365="H J Barelds"]
    { document.write("<img src='imagerc/cn-pieken.jpg'
    [/quote:8baf746365]
    Ik heb nog een kleine aanpassing:
    { document.write("<img src='imagerc[b:8baf746365]\[/b:8baf746365]/cn-pieken.jpg'

    Go figure.. 8)
  • In het verleden had ik het probleem, dat de \ (backslash) door de browser van het MacOS niet werd herkend en dus een foutmelding zonder afbeelding. Vandaar dat ikvoor de zekerheid voor het Web geen \ meer gebruik in een pad.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.