img bootstrap centrata nello schermo

[fabioweb90]

Buongiorno forum,
vorrei che l'immagine in questo sito fosse sempre centrata orizzontalmente e verticalmente rispetto un monitor PC e senza scroll..


A tal scopo sto utilizzando il tag img-responsive per le diverse risoluzioni ed una classe custom vcenter che però non funziona..


In allegato si può vedere come restringendo lo schermo l'immagine rimane sempre in alto.


Suggerimenti?
Grazie

[stoneweb]

Il mio suggerimento è di mettere l'immagine come sfondo del div principale e rendere il div principale absolute, in questo modo:

<a href="https://www.facebook.com/seratadigala/?fref=ts">
   <div id="container"></div>
</a>

e quindi per lo stile qualcosa del genere:

#container {
  background-image: url(layoutPC.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-position: center center;
}

In questo modo l'immagine si adatta sempre allo schermo e non compare lo scroll

[fabioweb90]

Eccellente! funziona perfettamente. E se adesso volessi i tre loghi indipendenti per rendere cliccabile "belvedere, bellis, moet"?

[stoneweb]

Eh questo è un altro discorso... bisognerebbe cambiare tutto e io vedo due alternative (poi ce ne saranno sicuramente anche altre):

1) tornare a un div con all'interno un'immagine come prima, ma con una mappa sull'immagine per rendere cliccabili solo alcune aree dell'immagine: http://www.html.it/pag/16053/le-mappe-di-immagine/

2) tagliare quell'immagine in modo da creare 5 div disposti in modo che il div 1 contenga l'immagine fino a "Gala dinner ... Rooms"; i div 2,3,4 conterranno le immagini linkate con Belvedere, bellis e moet; l'ultimo conterrà il "footer" con la parte di immagine "un evento ufficiale di ecc."

Queste mi sembrano al momento le soluzioni più semplici e corrette.

[fabioweb90]

Grazie, anche io avevo pensato alla prima soluzione. Però le coordinate si mantengono valide nel momento in cui scatta il resize?
Cioè a 1000px di risoluzione piuttosto che a 1300px i valori come si gestiscono?

[stoneweb]

No in effetti non è responsive come soluzione, per qualcosa di responsive puoi provare questo plugin jquery https://github.com/stowball/jQuery-rwdImageMaps ma io non l'ho mai usato e non so se funzioni o meno.
In ogni caso io propenderei per la seconda soluzione che ti ho dato