Resize afbeelding op schaal
Ik ben op zoek naar een manier om een afbeelding (of div) aan te passen aan de hoogte van de pagina maar wel op die manier dat als de hoogte word geschaald dat de breedte meeschaalt en dus niet verlepte afbeeldingen toont. Ik heb het een en ander gegoogled maar ik kom er niet mee verder. Weet iemand hoe ik dit voor elkaar kan krijgen?
Dus of width of height.
Probeer het onderste vak maar een hoger/lager te maken (balk tussen de 3 invoervelden en onderste uitvoerveld kan je verschuiven).
Code staat in het midden ;)
Uiteindelijk op onderstaand stukje Java gestuit voor het lopen door de foto's heen.
Wellicht een leidraad voor jou:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function update(a)
{
var width;
var height;
var preloader = new Image();
preloader.src = 'je_foto.jpg';
var imgh = preloader.height;
var imgw = preloader.width;
scalew=height/imgh;
scaleh=width/imgw;
if(scalew>=scaleh)
{
scale=scaleh;
}
else
{
scale=scalew;
}
newwidth=scale*imgw;
newheight=scale*imgh;
document.getElementById("foto").src='je_foto.jpg';
document.getElementById("foto").width=newwidth;
document.getElementById("foto").height=newheight;
}
{
var width;
var height;
var preloader = new Image();
preloader.src = 'je_foto.jpg';
var imgh = preloader.height;
var imgw = preloader.width;
scalew=height/imgh;
scaleh=width/imgw;
if(scalew>=scaleh)
{
scale=scaleh;
}
else
{
scale=scalew;
}
newwidth=scale*imgw;
newheight=scale*imgh;
document.getElementById("foto").src='je_foto.jpg';
document.getElementById("foto").width=newwidth;
document.getElementById("foto").height=newheight;
}
Nu worden de foto's in verhouding geschaald, zonder dat ze er vervormd uit komen te zien.
Code (php)
1
2
3
4
5
2
3
4
5
$(window).resize(function(){
var hoogte_window = $(window).height();
$('img').css('height',hoogte_window+'px');
$('img').css('width','auto');
});
var hoogte_window = $(window).height();
$('img').css('height',hoogte_window+'px');
$('img').css('width','auto');
});
Bedankt voor jullie moeite en tijd!
Maar het kan wel met puur CSS: http://codepen.io/anon/pen/BlEkc
Via http://stackoverflow.com/questions/1495407/css-a-way-to-maintain-aspect-ratio-when-resizing-a-div
Betere demo: http://jsbin.com/eqeseb/2/edit
Gewijzigd op 15/04/2013 14:23:52 door Eddy E