ridimensionare un rettangolo mantenendo le proporzioni

**pietro09** · 19-01-2006, 15:23

Ho un CONTENITORE rettangolare di lati w e h dove può essere:

w > h, h > w, w = h

Dentro ho un CONTENUTO rettangolare di dimensioni w1 e h1 e anche qui può essere più grande l'altezza o la larghezza.

vorrei ridimensionare CONTENUTO, mantenendo le proporzioni originali dei lati, w1/h1.

Riepilogando conosco:
w e h di CONTENITORE
w1 e h1 di CONTENUTO

voglio:
w1nuovo e h1nuovo mantenendo w1/h1 = w1nuovo/h1nuovo

chi mi aiuta?

**willybit** · 19-01-2006, 15:39

ciao piero09

ma w1nuovo e h1nuovo devono essere le dimensioni maggiori che si possono ottenere dentro il contenitore? cioè w e h sono le dimensioni massime?

**pietro09** · 19-01-2006, 16:04

Originariamente inviato da willybit
ciao piero09

ma w1nuovo e h1nuovo devono essere le dimensioni maggiori che si possono ottenere dentro il contenitore? cioè w e h sono le dimensioni massime?

Ciao willybit

Si. Debbo ingrandire il contenuto, mantenendo le proporzioni dell'originale, in modo che sia contenuto nel contenitore, badando bene che il contenitore può avere larghezza > altezza, contenuto può avere altezza > larghezza

**willybit** · 19-01-2006, 16:11

ti faccio un esempio che vale più di tante parole

codice:

<HTML>
<HEAD>
<title>Ridimensionamento proporzionato</title>
<script language="javascript">
function Init(){
	var ff = document.FormDati 
	var dd = document.getElementById('contenitore')
	ff.ContenitoreW.value=dd.style.width
	ff.ContenitoreW.value=ff.ContenitoreW.value.replace(/[^\d]/g,'');
	ff.ContenitoreH.value=dd.style.height
	ff.ContenitoreH.value=ff.ContenitoreH.value.replace(/[^\d]/g,'');
	dd = document.getElementById('contenuto')
	ff.ContenutoW.value=dd.style.width
	ff.ContenutoW.value=ff.ContenutoW.value.replace(/[^\d]/g,'');
	ff.ContenutoH.value=dd.style.height
	ff.ContenutoH.value=ff.ContenutoH.value.replace(/[^\d]/g,'');
}
window.onload=Init
function proporzioni(x,y,xmax,ymax){
	if(parseInt((ymax*x)/y)<xmax){
		this.newY = ymax
		this.newX = parseInt((ymax*x)/y)
	}
	else{
		this.newX = xmax
		this.newY = parseInt((xmax*y)/x)
	}
}
function adatta(ff){
	var x = parseInt(ff.ContenutoW.value,10);
	var y = parseInt(ff.ContenutoH.value,10);
	var maxx = parseInt(ff.ContenitoreW.value,10);
	var maxy = parseInt(ff.ContenitoreH.value,10);
	var pp = new proporzioni(x,y,maxx,maxy);
	ff.ContenutoW.value=pp.newX;
	ff.ContenutoH.value=pp.newY;
	ridisegna(ff);
}
function ridisegna(ff){
	var dd = document.getElementById('contenitore')
	dd.style.width=ff.ContenitoreW.value
	dd.style.height=ff.ContenitoreH.value
	dd = document.getElementById('contenuto')
	dd.style.width=ff.ContenutoW.value
	dd.style.height=ff.ContenutoH.value
}
</script>
</HEAD>
<body>
<form name="FormDati">
  Contenitore W <input type="text" name="ContenitoreW">

  Contenitore H <input type="text" name="ContenitoreH">

  

  Contenuto W <input type="text" name="ContenutoW">

  Contenuto H <input type="text" name="ContenutoH">

  

  <input type="button" value="ridisegna" onclick="ridisegna(this.form);">

  <input type="button" value="adatta" onclick="adatta(this.form);">
</form>
<hr>
<div id="contenitore" style="background-color:red;width:200px;height:300;">
	<div id="contenuto" style="background-color:yellow;width:50px;height:30;"></div>
</div>
</body>
</html>

**supermac** · 19-01-2006, 16:18

io avevo fatto questa in asp, serviva a ridurre le dimensio di una immagine se era + grande di quelle del contenitore.
Se la traduci in js dovresti avere quello che ti serve

A e B sono le dimensioni del contenitore
Bimg e Himg sono le dimensioni dell'immagine

function Resizer(flnm, A, B)
Dim base, altezza, coeff
A = Int(A)
B = Int(B)
if (Himg<B AND Bimg<A) then
response.write("")
else
'lavoriamo con l'altezza
coeff = B/Himg
If Himg <= B then
altezza = B
else
altezza = Int(Himg*coeff)
end if
base = Int(Bimg*coeff)
' e ora controlliamo la base
if base > A then
coeff = A/Bimg
altezza = Int(Himg* coeff)
base = A
end if
response.write(" width=" & base &" height=" & altezza )
end if
End function

**pietro09** · 19-01-2006, 16:30

meglio codice che parole

vi ringrazio, ciao

**willybit** · 19-01-2006, 16:33

comunque il succo di tutto sta qua

codice:

function proporzioni(x,y,xmax,ymax){
	if(parseInt((ymax*x)/y)<xmax){
		this.newY = ymax
		this.newX = parseInt((ymax*x)/y)
	}
	else{
		this.newX = xmax
		this.newY = parseInt((xmax*y)/x)
	}
}

gli passi larghezza e altezza del contenuto, larghezza e altezza del contenitore e ti restituisce un oggettino con la nuova larghezza e la nuova altezza del contenuto

**pietro09** · 19-01-2006, 16:43

Originariamente inviato da willybit
comunque il succo di tutto sta qua

codice:

function proporzioni(x,y,xmax,ymax){
	if(parseInt((ymax*x)/y)<xmax){
		this.newY = ymax
		this.newX = parseInt((ymax*x)/y)
	}
	else{
		this.newX = xmax
		this.newY = parseInt((xmax*y)/x)
	}
}

gli passi larghezza e altezza del contenuto, larghezza e altezza del contenitore e ti restituisce un oggettino con la nuova larghezza e la nuova altezza del contenuto

Certo. Mi piace come restituisce i dati.

Discussione: ridimensionare un rettangolo mantenendo le proporzioni

Strumenti discussione

Ricerca discussione

Visualizza

ridimensionare un rettangolo mantenendo le proporzioni

Permessi di invio