Ridimensionamento particolare di un oggetto 
Author: Valentina F.Buongiorno,
vorrei impostare un ridimensionamento ad hoc di un oggetto a seconda dei pixel del supporto sul quale viene visualizzato. Mi spiego meglio: ho usato un oggetto immagine (nel caso specifico contenuto nell' imCell_117): esso viene correttamente visualizzato su desktop ma diventa troppo grande rispetto agli oggetti vicini se visualizzato su smartphone.
L'oggetto è un'immagine, che vorrei venisse rimpicciolita (se visualizzata appunto su smartphone) almeno del 50%-60%
Chiedo, nel caso, se sia meglio utilizzare un altro tipo di oggetto.
Sull'esempio impeccabile di codice che mi era stato scritto molto gentilmente da KolAsim su una mia precedente richiesta di ridimensionamento di un carattere a seconda dei pixel del supporto, ho vergognosamente provato a scrivere io un codice che (ovviamente) non funziona. KolAsim puoi farti una bella risata.
Chiedo quindi nuovamente supporto. La pagina cui ho applicato questo triste tentativo è: http://www.inesergo.it/mindfulness.html L'oggetto è l'immagine in fondo che linka alla pagina FB.
Ringrazio come sempre: siete straordinari.
Valentina
Tanto per provare prova a mettere l'immagine in un oggetto testo si comporta in modo differente rispetto all'oggetto immagine
in aggiunta, si potrebbe anche ridimensionare ulteriormente considerando le dimensioni reali di utilizzo:
www.inesergo.it/images/unnamed.jpg
Author
E' la prima cosa che ho provato.
Va un po' meglio ma su smartphone risulta essere comunque troppo grande rispetto agli elementi che lo circondano.
Author
Certamente, ma il problema è che su desktop la dimensione che l'oggetto ha è perfetta (rimane incolonnata rispetto ai pulsanti FB che la sovrastano). Su smartphone dovrebbe fare la stessa cosa, invece segue un iter di ridimensionamento differente e obiettivamente rimane troppo invasivo.
Grazie cmq per i consigli :-)
al limite potresti utilizzare due oggetti con immagini differenti, ad un certo breackpoint sparisce uno ed appare l'altro è un'idea io feci cosi per il menù ad hamburger su una pagina.
altra cosa che potresti provare, è quella di ridimensionare l'immagine ad un certo breackpoint:
<style>@media (max-width: 479px) {
#imObjectImage_8_02 {max-width: 50%}
}
</style>
... non mi pare un Oggetto Immagine, forse hai modificato, in quanto a risoluzioni intermedie funziona male...
... ripubblica con Oggetto Immagine senza eventuale relativo codice extra, ed avvisa quando fatto, in modo da pater valutare, e poi dovrebbe essere semplice...
*
*
....
Author
ora la pagina è ripubblicata con l'oggetto immagine senza "fardelli" aggiunti
... sopra 1250 px resta quello che hai impostato tu; ... al di sotto controlli con questo codice
:
<style>
@media (max-width: 1249px) { #imCell_67 {overflow:hidden !important}
#imCell_118 div {position: absolute;right:8px;max-width:135px !important;} }
@media (max-width: 719px) { #imCell_67 {overflow:hidden !important}
#imCell_118 div {position: absolute;right:10px;max-width:135px !important;} }
@media (max-width: 479px) { #imCell_67 {overflow:hidden !important}
#imCell_118 div {position: absolute;right:11px;max-width:135px !important;} }
</style>
.
... oppure provalo ridotto e semplificato per tutte le risoluzioni:
<style>
#imCell_67 {overflow:hidden !important}
#imCell_118 div {position: absolute;right:8px;max-width:150px !important;}
</style>
.
Author
Ho inserito il codice e funziona perfettamente (ma non avevo alcun dubbio!)
Dovendo riprendere la stessa funzionalità in tutte le altre pagine del sito immagino sia sufficiente cambiare il numero di riferimento della #imcell.
Grazie davvero.
Siete straordinari
... ho visto, funziona...
... per le altre pagine, sì, devi intercettare i sellettori di riferimento, che per questa pagina sono #imCell_67 per l'oggetto normale, e #imCell_118 per la tua immagine...
.