Problema con immagine di sfondo della pagina adattata al contenuto della finestra 
Autore: Rino D.
Visite 1010,
Followers 1,
Condiviso 0
Salve come da titolo ho bisogno di centrare ed adattare un immagine fissa al sito con opzione adatta al contenuto , ho provato a creare un progetto vuoto ed inserire l ' immagine in allegato ma questa , almeno con l'anteprima viene tagliata sul fondo ... idee ?
saluti
rino
Postato il
Ciao Rino.. di solito non utilizzo adatta al contenuto ma la prima opzione non ripetere
Autore
Ho pubblicato il link per scaricare il progetto di cui sopra all ' indirizzo :-
http://www.quellocheiovogliosapere.altervista.org/momentanea.php
vorrei adattare l ' immagine interamente al contenuto della finestra , nelle versioni precedenti del programma funzionava correttamente
saluti
... non posso verificare nel programma, ma forse c'è l'opzione che deforma l'immagine per diffondersi a tutto schermo...
... altrimenti con un codice extra sarebbe immediato ottenerlo usando l'attributo fixed con background-size ...
.
scusa Rino nelle versioni precedenti del precedenti non c'era la funzione stile righe forse tu la inserivi in proprietà di pagina > Grafica > sfondo della pagina
ma Rino non ha parlato di stile righe, in effetti con quell'immagine lo fa anche a me...viene tagliata sotto, ma perchè è troppo grande...
Il problema è la dimensione dell'immagine che è 719x590px
Se la adatti allo sfondo per esempio di un monitor 1024x600 avrai l'immagine che allargata a 1024 avrà un'altezza di 843px, quindi per stare nel monitor viene tagliata sul fondo.
L'alternativa sarebbe deformarla.
Quindi l'immagine che devi preparare deve avere la proporzione 3:2 cioè 719X480px
Se però il monitor che la visualizza ha altre proporzioni... (e non si può prevedere) cade tutto.
Meglio sarebbe che la parte inferiore sia "sacrificabile" anche se tagliata.
Ciao
... come anticipato, penso che volesse ottenere >> questo risultato...
.
Autore
Ciao
kol
il link non riporta niente forse hai rimosso l ' esempio son stato fuori per lavoro hai usato jquery per ottenere altezza e larghezza ed adattare l'immagine ? ma per le proporzioni ?
Autore
Ciao
kol
il link non riporta niente forse hai rimosso l ' esempio son stato fuori per lavoro hai usato jquery per ottenere altezza e larghezza ed adattare l'immagine ? ma per le proporzioni ?
Autore
Ciao giorgio ho bisogno di adattare l' immagine a qualsiasi dim del monitor che la visualizza c'è modo di farlo ?
... riprova, ho ripristinato il LINK, ma è sempre una directory temporanea ...
... no! jQuery, ma il normale ridimensionamento HTML con deformazione dell'immagine, ...l'unico metodo che in questo caso utilizza interamente tutta l'immagine...
ciao
L'unico modo senza deformare l'immagine é prevedere un margine "sacrificabile" intorno al'immagine facendo delle prove alle varie risoluzioni.
qualche volta verrà tagliata sotto oppure ai lati.
Ciao
Autore
Si l'effetto è quello kol ma vorrei evitare di deformare l ' immagine ! forse dovrei fare varie campionature dell ' immagine alle diverse risoluzioni utilizzare tipo jquery per determinare la dimensione dello schermo e adattarci l'immagine corretta....
io l'ho utilizzato sullo stile righe.. e con una query hai vari breackpoint potresti sostituire l'immagine ...
esempio:
/* sostituzione immagine row3 */
@media (max-width: 719px) {
#imPageRowGraphics_3 {
background-image: url("files/sfondo_row3.jpg");
}
...no! ... non serve; ...la tua immagine è proprio adatta a questo scopo perchè si vede correttamente e chiaramente ovunque; ... il discorso sarebbe stato diverso se si fosse trattato di immagine fotografica, ove nel qual caso la distorsione (sempre usata in passato) si presentasse in modo più evidente...
... se non si giocasse con il ridimensionamento della finestra, si potrebbe pensare che l'immagine fosse proprio quella...
... il primo ridimensionamento razionale e centrato della storia che io conosca, l'avevo inventato io in ambiente SwishMax, anni prima di jQuery...
... non otterrai un risultato migliore del 100|100 che hai visto...
... usando le media query ti disperderesti, dovendo considerare sia la larghezza che l'altezza dell'eventuale finestra del visitatore...
... una alternativa più valida, ma per me non tanto per il tipo di immagine, sarebbe quella di integrare maximage(*), con una immagine incorniciata in modo opportuno...
> immagine normale
> immagine rivista
... il resto dipenderà da te... ... per me il 100|100, in questo caso, è il metodo più valido...
(*) - nel caso ti interessasse, o attingi al sorgente del mio esempio (fin quando disponibile)!, oppure, e forse meglio, studi le opzioni direttamente alla fonte > MAXIMAGE ...
.
ciao
.