login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Minimaliseren scherm

Offline Hay_Lin - 22/08/2012 10:13
Avatar van Hay_LinNieuw lid Hallo,

Ik ben een website aan het maken, en loop tegen het volgende probleem aan, waarvan ik hoop dat iemand een oplossing voor mij heeft!

Ik heb een aantal afbeeldingen op de site gezet. Wanneer ik mijn scherm minimaliseer (op welke manier dan ook, in de lengte/breedte), wil ik graag dat mijn lay-out er nog steeds goed uitziet.

Op dit moment verkleinen de afbeeldingen zichzelf wel, dit heb ik in CSS geregeld met max-height & max-width. Echter ziet het er na het verkleinen van de browser nog steeds niet erg mooi uit.  

Heeft iemand misschien een idee hoe ik dit op een goede manier kan regelen?

Alvast bedankt!  

Hay_Lin

3 antwoorden

Gesponsorde links
Offline julianb - 22/08/2012 10:25 (laatste wijziging 22/08/2012 13:31)
Avatar van julianb Lid Je kan Jquery gebruiken, Maar je kan ook een specifieke afbeelding voor alleen mobiel en tablet gebruiken maken. En die dan aanroepen wanneer mobiel of tablet gebruikt wordt.

zelf vond ik dit nog, misschien heb je er wat aan https://github.com/davidmarkclements/Respondu

respondu is het nieuwe responsive.

Edit:

<picture alt="angry pirate">
<source src=hires.png media="min-width:800px">
<source src=midres.png media="min-width:480px">
<source src=lores.png>
<!-- fallback for browsers without support -->
<img src=midres.png alt="angry pirate">
</picture>

zo iets als dit.

of je gebruikt dit:
img {
max-width: 100%;
height: auto;
}
ook erg handig, de image past zich aan, aan het beeldscherm door dat er % staat
edit: je kan die max-width natuurlijk ook aanpassen aan jouw site bijv 80% or whatever
Offline Hay_Lin - 22/08/2012 13:27 (laatste wijziging 22/08/2012 14:47)
Avatar van Hay_Lin Nieuw lid Ik ga het even proberen! Ik laat je het weten als het gelukt is! 

Edit: het lukt me toch niet helemaal.. Ik plaats de broncode voor je zoals ik het eerst had even:

HTML:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="sleutel"><img class="sleutelrood" src="afbeeldingen/sleutelrood.png" /></div>



CSS:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. img.sleutelrood
  2. {
  3. max-height: 100%;
  4. max-width: 100%;
  5.  
  6.  
  7. width: auto;
  8. height: auto;
  9.  
  10. position: fixed;
  11. top: 0;
  12. left: 0;
  13. }
  14.  
  15. #sleutel
  16. {
  17. position: relative;
  18. }



Wat er dus gebeurd als ik het scherm verklein, is dat hij oneindig klein kan. Ik wil dat dit op den duur stopt. Daarnaast wil ik, als ik hem alleen wat minder breed maak, dat de lay-out er nog fatsoenlijk uit ziet (het word nu als het ware in elkaar geperst, waarbij de plaatjes even groot blijven).

Ik hoop dat je het snapt! Ik ben zelf nog een beginner met HTML/CSS, hihi
Offline julianb - 22/08/2012 16:39 (laatste wijziging 22/08/2012 16:50)
Avatar van julianb Lid voor dat oneindig verkleinen is deze oplossing:

min-height:..%;

kun je misschien van de laatste een plaatje laten zien?

Je kan natuurlijk ook media queries gebruiken. misschien dat dat helpt.
daarmee kan je een max/min resolutie opgeven en wanneer die resolutie bereikt word,
bijvoorbeeld het letterypen kleiner of juist groter.

hier wat tutorials misschien helpt je dit verder op weg 
http://css-tricks.com/css-media-queries/
http://webdesig...ia-queries

edit: waarom fixed bij je image?
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.25s