PDA

Visualizza la versione completa : dimensione piu piccola su desktop


ludo13
03-03-2020, 20:31
ciao ragazzi, scusate ma non so se il posto giusto qui per questa domanda...in ogni caso io ho un sito che pporta un'immagine nella parte alta dell'header in varie pagine ad es. https://www.drmirellamazzaccaro.it/aree-dintervento/psicoterapia-individuale/ opp. https://www.drmirellamazzaccaro.it/aree-dintervento/terapia-familiare/ Vorrei tentare di avere un'immagine piu bassa nella versione desktop (quindi stessa arghezza ma tagliataun po' ), mentre puo andar bene quella su mobile così come appare ora. Il problema è che non sono molto bravo e vorrei capire innanzitutto se è possibile farlo senza grossissime difficoltà e in ogni caso descrivendosmi i vari step da seguire con semplicità se possibile.. Al limite c'è la possibilità di richiamare 2 immagini diverse a seconda da dove si apre il sito? tenete conto che il template della pagina l'ho creato modificando un template di pagina right-sidebar, e inserendovi il breadcrumb, e l'immagine subito sopra....vi ringrazio

Vincent.Zeno
03-03-2020, 21:03
ciao, puoi agire in diversi modi; ma per semplificare puoi tentare questo:
al css aggiungi


div#wrapperpages {text-align:center;}
div#wrapperpages > img {max-width:1000px;}

dovrebbe fare al caso tuo

KillerWorm
03-03-2020, 21:30
Ciao, il posto più corretto è CSS.
Puoi risolvere in vari modi.

Molto semplicemente prova ad aggiungere questa regola nel tuo css (dove meglio credi):

#wrapperpages > img {
width: 100%;
max-height: 400px;
object-fit: cover;
object-position: center top;
}
Puoi modificare il valore di max-height per regolare l'altezza a tuo piacimento.

Prova e fai sapere.

[edit]
ho visto solo ora la risposta di Vincent. Penso però che ludo13 intendesse mantenere sempre la larghezza massima e tagliare l'immagine in altezza

(quindi stessa arghezza ma tagliataun po' )

ludo13
03-03-2020, 21:45
ragazzi, che dire, perfetto! funziona alla grande...si esatto killer...comunque grazie tanto a tutti e due;)

Loading