pensa che fin dall'inizio avevo capito che tu parlassi dell'immagine del logo.
Ora è un po' più chiaro.
Quell'immagine è un background (come hai giustamente indicato nell'ultimo post) applicato ad un contenitore principale:
codice:
<div class="page-section restaurant-detail-image-section" style=" background: url(la_tua_immagine.jpg) no-repeat scroll 0 0 / cover;">
Puoi notare che ha il valore cover (riferito alla sotto-proprietà background-size) che serve a ridimensionare l'immagine proporzionalmente in modo da riempire l'intero ingombro dell'elemento stesso su cui è applicata.
Ora, se tu volessi invece ridimensionarla (e magari centrarla) in modo che resti visibile l'intera immagine, puoi usare il valore contain (e sostituire gli zeri col valore center per centrarla)
codice:
<div class="page-section restaurant-detail-image-section" style=" background: url(la_tua_immagine.jpg) no-repeat scroll center / contain;">
Qui però nascono altri problemi:
- il colore di sfondo (non coperto dall'immagine) è grigio; questo però è dovuto ad un effetto di trasparenza utilizzato per scurire l'intera immagine di sfondo. Se vuoi mantenere questo grigio, allora il problema non c'è, ma se ti serve comunque avere un diverso color (presumo nero) allora bisogna vedere come risolvere.
- applicando la proprietà contain il problema si potrebbe risolvere per metà perché bisogna considerare che l'immagine viene rimpicciolita fino ad essere contenuta per intero nell'elemento; ciò significa che, se l'immagine è molto larga rispetto alla sua altezza (come il tuo caso) questa sarà ridotta parecchio per quelle visualizzazioni con schermo ridotto. A quel punto vedresti un'immagine troppo sottile.
- il background è comunque esteso per l'intera altezza di quel contenitore (anche se l'immagine resta centrale); questo può creare altre problematiche a seconda della dimensione che assume l'immagine stessa e come viene ridimensionata dentro quel contenitore.
Purtroppo, in questo caso, modificando anche una semplice cosa si crea un effetto domino.
Ti consiglierei un compromesso: magari potresti prima di tutto usare un'immagine con delle dimensioni più equilibrate, ad esempio 4/3 (larghezza/altezza) o giù di lì, quindi mantenere il valore cover per quel background ma con una posizione centrata e con il valore content-box (riferito alla proprietà background-clip). Quest'ultimo valore serve ad applicare lo sfondo limitandolo all'area centrale dell'elemento (cioè escludendo il padding).
Rimane il colore di sfondo. Non è possibile assegnarlo normalmente al contenitore. Da ciò che ho valutato è però possibile applicarlo usando un background multiplo.
Riassumendo, potresti usare una regola del genere:
codice:
background: url(immagine.jpg) no-repeat scroll center / cover content-box, #000
Questa puoi inserirla al posto di quella già applicata direttamente su quel tag.
Già così dovresti vedere delle differenze; come già detto, potresti eventualmente utilizzare un'immagine con proporzioni più equilibrate per ottenere un migliore risultato.
Fai delle prove e vedi se ci abbiamo preso.
Se poi vuoi avere questa impostazione solo per gli schermi ridotti, allora la cosa è da impostare attraverso i breakpoint definiti per il responsive e non con lo stile in linea (sul tag) come è ora.
Rispondi quotando
)
