Due immagini ai lati --> però scalabili

[Giuly_89]

Ciao ragazzi,

mi trovo a dover lottare con due immagini (A e B) nella homepage, mi piacerebbe che una stesse a sinistra e l'altra a destra: in maniera automatica e con qualsiasi risoluzione dello schermo.

Schermo 16:9 (ad esempio 1920x1080)
16-9.jpg

Schermo 2:3 (ad esempio 1024x768)
2-3.jpg

Come faccio a fissare queste due immagini ai lati? Però che restino lì anche se la risoluzione dei vari schermi è diversa.

Grazie a tutti e buona giornata!!

[Giuly_89]

up

[Vincent.Zeno]

le possibilità sono diverse... dipende dal contesto. che intendi per "scalabili"?
ha già dato un'occhiata agli esempi di layout a tre colonne?
http://www.html.it/guide/guida-layou...iti-con-i-css/

[Giuly_89]

Grazie per il link!

Scalabili intendo che se ad esempio le due immagini hanno un'altezza di 800 pixel finche le guardo su uno schermo con risoluzione 1920x1080 tutto OK mentre se le guardo su di uno schermo con risoluzione 1024x768 mi escono dalla finestra del browser.
Vorrei che si riadattassero in automatico, probabilmente si riesce con i CSS ma non so da dove partire.

[Vincent.Zeno]

Vorrei che si riadattassero in automatico

si, ma rispetto a cosa?
se stabilisci la dimensione solo della larghezza, l'altezza dell'immagine è proporzionale.
altrimenti è altra cosa. prova a dire di più



nota
la schermo è 4:3 (non 2:3)

[Giuly_89]

si, ma rispetto a cosa?
se stabilisci la dimensione solo della larghezza, l'altezza dell'immagine è proporzionale.

Esatto, il discorso è più semplice del previsto solo che non ricordo come si fa!

Io ho queste due immagini ai lati di 200px di larghezza e 1000px di altezza ciascuna: viste in uno schermo 16:9 si vedono bene, viste in un 4:3 ovviamente vengono tagliate sotto. Il problema è proprio quello, come fare a proporzionarle in maniera automatica anche se la risoluzione delle foto è 200x1000? (vedere foto sotto)
Immagine.jpg

[Vincent.Zeno]

ok: ho capito che vuoi vedere tutta l'immagine... ma di nuovo: proporzionarle rispetto a cosa? alla fine cosa vuoi ottenere?
qui la faccenda o la gestisci in percentuale (per esempio all'interno di contenitori) o si va sul layout a tre colonne con responsive design
(se l'accorci bisogna anche che si restringa)

[Giuly_89]

Vorrei ottenere che negli schermi con risoluzione bassa non mi vengano tagliate le immagini.
Quindi fare in modo che le immagini si rimpiccioliscano in automatico anche quando semplicemente stringo la finestra del browser, un riadattamento automatico.
Le due immagini sono dentro una tabella, e nel CSS ho messo questo:
#immagine1 {
position: absolute;
right:0px;
top:0px;
border:none;
}#immagine2{
position: absolute;
left:0px;
top:0px;
border:none;
}

E' ovvio che così non basta, ho anche provato a metterci un height:100%; ma nulla cambia.
Spero di esser stato più chiaro, non saprei come altro spiegarmi.

E cmq sì, se le accorcio ho bisogno che mi si restringano anche.

[Vincent.Zeno]

qui la guida per il responsive design
http://www.html.it/guide/responsive-...sign-la-guida/
occhio alla compatibilità coi browser meno recenti (tipo IE8), per i quali dovrai offrire soluzioni alternative

[Vincent.Zeno]

oppure, forse è più vicino a quello che intendevi, qui c'è un esempio fatto con una tabella:

<table style="width: 100%">
	<tr>
		<td style="width: 33%">
		<img alt="" src="img.jpg" style="width: 100%" ></td>
		<td style="width: 34%">&nbsp;</td>
		<td style="width: 33%">
		<img alt="" src="img.jpg" style="width: 100%" ></td>
	</tr>
</table>