Sto lavorando ad una galleria immagini con un layout a scroll orizzontale e centrato verticalmente sulla pagina.
Queste immagini hanno aspect-ratio differenti e dimensioni differenti.
Vorrei fare in modo che si visualizzino tutte in fila con la stessa identica altezza, e la larghezza scalata di conseguenza in relazione all'altezza
Inoltre fare in modo che si adattino ai diversi schermi, occupando sempre una certa porzione dello schermo, (per cui credo sia indispensabile l'altezza in percentuale ?)
Per ora ho questo codice ma le immagini sforano la schermata in altezza, mi date una mano a trovare la soluzione? grazie
codice:<style> .aimage{ height: 90%; } html, body {height: 100%;} table, td, th {height:100%;vertical-align: top;} td{text-align:center;} th{text-align:left} #outer{height:100%; width:auto; display:table;} #inner{display:table-cell; vertical-align: middle;} </style> <body> <div id="outer"> <div id="inner"> <div id="container"> <table><tr><td> <td>[img]1.jpg[/img]</td> <td>[img]2.jpg[/img]</td> <td>[img]3.jpg[/img]</td> <td>[img]4.jpg[/img]</td> </tr></table> </div> </div> </div>
Rispondi quotando
