AP div mee laten groeien met venster uittrekken

[roosje1996]

Ik heb wederom een vraag...

Hoe kan ik een foto in een apdiv (in een div wrapper) mee laten groeien bij het uittrekken van een venster?

De foto moet links bovenin blijven staan maar wel vergroten bij een grotere venstergrootte....

Ik hoop dat iemand mij hier mee kan helpen,
ontzettend bedankt iig!

Groet Roos!

 

[csshunter]

Yo Roos,
Zo zonder iets van de site te zien, zou ik in het algemeen zeggen:

• De APdiv ontsnapt (door het AP = Absolute Positie karakter) aan de wrapper-div.
• Als je de breedte van de APdiv als percentage (van de schermbreedte) opgeeft, dan rekt en trekt die mee met het vensterformaat.
• Dat kan je testen door de APdiv even een randje of een achtergrondkleur te geven.
• Als je nu het img in de APdiv een breedte van 100% geeft (zonder opgave van hoogte!), zou dat mee moeten rekken en trekken met de breedte van de APdiv.
• De hoogte van het plaatje past zich op deze manier automatisch aan aan de breedte, zodat alles mooi in verhouding blijft.

Met vriendelijke groet,
CSShunter

[Edit]Het kan ook zonder de APdiv eromheen: je kunt het img ook ergens "koud in de html-code" hangen als AP element.
Zie testpagina schaalbaar-AP-img.htm (1) en de broncode daarvan; vensterbreedte veranderen > img past zich aan.[/edit]

[edit]Hierboven was het % afgeleid van de schermbreedte. Je kunt het % ook vastknopen aan de schermhoogte. Als je die dan varieert, kan het img ook groeien en krimpen, zoals deze (2).

Maar doe je zowel de breedte als de hoogte in %, dan kan er vervorming optreden als je het venster niet precies diagonaal uitrekt!
Dat is deze (3).[/edit]

 

[roosje1996]

Hoi,

JA dit bedoel ik! Helemaal geweldig,ik heb alleen nog 1 vraag... Hoe krijg je je IMG dan zover dat de verhoudingen behouden blijven?

Alvast bedankt!

 

[csshunter]

Hoi roosje1996,

Hoe krijg je je IMG dan zover dat de verhoudingen behouden blijven?

Daar hoef je helemaal geen moeite voor te doen, want dat zit ingebakken in de browser:

• Een browser kan uit een binnengekomen img altijd uitlezen wat de reële breedte en hoogte is (ook als niets is opgegeven in de html of css). - Geef je niets op, dan wordt op het scherm de ware grootte van de afbeelding gebruikt.
• Een img heeft altijd een verhouding breedte/hoogte; die weet de browser dus vanwege de bekendheid van de ware grootte van de breedte en de hoogte.
• Als je alléén de breedte van een img opgeeft (in px of %), zoekt de browser de verhouding breedte/hoogte op, en berekent daaruit de bij die breedte passende hoogte.
  Dat was voorbeeld 1 hierboven: <img src="..." width="25%" alt="" />.
• Als je alléén de hoogte van een img opgeeft (in px of %), zoekt de browser de verhouding breedte/hoogte op, en berekent daaruit de bij die hoogte passende breedte. Dat was voorbeeld 2 hierboven: maar als de schermbreedte verandert, past het img zich niet aan!
• Als je zowel de breedte als de hoogte van een img opgeeft (in px of %), laat de browser de verhouding breedte/hoogte los, en gebruikt de opgegeven waarden zonder op of om te kijken. Dat was voorbeeld 3 hierboven: maar dan kunnen dus de verhoudingen aardig scheef komen te liggen!

In de praktijk zal vooral de breedte van het scherm, en daarmee de breedte van de afbeeldingen kritisch zijn: dus met opgeven van de relatieve breedte (in %) van een img zal je er al zijn (voorbeeld 1). *)

• Tip: gebruik voor het maken van de afbeelding altijd het grootste formaat dat je om scherm kunt verwachten. Browsers kunnen redelijk goed afbeeldingen verkleinen (= pixels weglaten), maar bij vergroten moet de browser er pixels bij verzinnen (= nieuwe pixels raden) - en dat gaat ten koste van de kwaliteit van de afbeelding.
  Zie dit voorbeeld img-verkleinen-vergroten.htm.

Met vriendelijke groet,
CSShunter
___________________
*) Het vastprikken van de hoogte in een percentage van de schermhoogte zal bij een "normale layout" niet nodig zijn: als afbeeldingen en/of tekst van een webpagina er niet op passen, kan je naar beneden scrollen. Dat is handiger dan van links naar rechts laten scrollen.

[edit]Bij het laten vergroten of verkleinen door de browser treden verschillen tussen browsers op! Bij verkleinen brengt bv. Internet Explorer 7 het er slecht af; Firefox en Opera laten nauwelijks kwaliteitsverlies zien t.o.v. de kleine afbeelding op ware grootte (in tekenprogramma verkleind). Ook bij vergroten doet IE7 het slechter dan de andere.[/edit]