• Articles
• admin

da Christopher Heng, thesitewizard.com

Un visitatore mi ha chiesto come poteva trasformare un immagine in modo che sia visualizzato verticallywhen qualcuno visto la sua pagina web su un telefono cellulare. Cioè, voleva che l’immagine fosse mostrata nel suo solito orientamento, con il lato più lungo orizzontale, su un computer desktop o portatile, ma ruotato su un telefono, quindi il lato più lungo è ora verticale.

Preambolo

• Questo articolo tratta di un’immagine che deve essere visualizzata in modo diverso sui monitor del computer e sui telefoni cellulari. Se vuoi semplicemente ruotare un’immagine in modo permanente in modo che sia sempre in quella posizione, indipendentemente da come viene visualizzata, dovresti semplicemente usare animage editorto per farlo. È molto più semplice ed efficiente, ed evita i problemi che sorgono quando ottieni CSS per la rotazione per te.

• Un’alternativa alla rotazione di un’immagine è ridurla per adattarsi alla larghezza dello schermo di un telefono cellulare. Mostwebsites farlo in questo modo. Se si preferisce che, si prega di readHowto Rendere le immagini Mobile-Friendly (Responsive Design), invece. Ho anche un articolo che mostra come nascondere le immagini su un sito Web quando viene visualizzato su un telefono cellulare.

• Il mio visitatore aveva un sito Web che utilizzava il layout a 2 colonne generato dalla procedura guidata di layout Mobile-FriendlyLayout, ma è anche possibile utilizzare le tecniche descritte di seguito su un sito Web progettato utilizzando qualsiasi layout, auto-creato o ottenuto da altrove. Cioè, il metodo è generale che può essere utilizzatoindipendentemente da come hai progettato il sito.

• Ovviamente, questo articolo presuppone che tu abbia già un sito web. In caso contrario, si prega di iniziare con la guida sucome creare un sito web.Si può sempre tornare a questo articolo per mettere a punto le cose dopo aver ottenuto il disegno di base fatto.

Come ruotare un’immagine in CSS

Diciamo che hai un’immagine con un ID di “demo_picture”. Per ruotarlo, utilizzare il seguente CSS.

Se questo fa ruotare la tua immagine nella direzione sbagliata, usa invece rotate(90deg). Come youmay hanno intuito, è possibile utilizzare qualsiasi angolo che ti piace. Il mio uso di 270 e 90 gradi è perchél’argomento a portata di mano è quello di girarlo in modo che la sua lunghezza sia ora l’altezza e viceversa.

Tuttavia, se si utilizza semplicemente il codice sopra, si noterà rapidamente un problema. L’immagine ruota intorno aun punto nel suo centro (“centro” se usi un diverso varietà di inglese). Ciò significa che l’immagine ruotata si sovrapporrà al contenuto sopra e sotto di esso.

A questo punto, probabilmente penserai: “Hmm. È facile da risolvere. Mi limiterò a mettere l’immagine nel suo proprio blocco DIV con un’altezza fissa che dà abbastanza spazio per l’immagine ruotata.”

Quindi, per un’immagine ha una larghezza di (diciamo) 202 pixel e un’altezza di 42 pixel, l’HTML apparirà qualcosacome questo:

E il CSS per dare il DIV bloccare l’altezza necessaria è:

Purtroppo, se si utilizza il codice così com’è, troverete che mentre il contenitore ha il requisito dell’altezza,l’immagine ruotata ancora sovrapposizione paragrafo sopra lasciando un grande vuoto sotto, sinceit si impernia il suo centro, pur rimanendo sostanzialmente in cui era.

Il trucco è quello di regolare la sua posizione originale prima di ruotarlo, in modo che l’uscita finale sia inla posizione corretta. Per assicurarsi che il risultato ruotato non copra alcun testo sopra, ma si trovi esattamente nel blocco DIV assegnato per esso, dobbiamo spostarlo di una distanza pari a (width - height)/2verso il basso (dove “/” rappresenta il segno di divisione). Puoi facilmente eseguire questo calcolo manualmente e metterei risultati nel CSS, o, se vuoi lasciare un record di come hai ottenuto il numero finale,lascia che il browser faccia il calcolo per te, con “calc((202px - 42px)/2)“. Ovviamente dovrai cambiare i numeri in quelli appropriati per la tua immagine. Userò la funzione calc() in questo tutorial in modo che sia più chiaro come sono arrivato al risultato.

La modifica della posizione superiore può essere eseguita in diversi modi, ad esempio con una regola margin-top o, se si preferisce continuare a utilizzare le funzioni di trasformazione,con translateY().

Il seguente esempio utilizza margin-top:

Il codice seguente utilizza una funzione di trasformazione:

Se si sceglie di utilizzare translateY(), assicurarsi che la traduzione è fatto prima therotation, poiché l’ordine delle operazioni è significativo.

L’immagine demo sopra aveva la sua posizione superiore regolata con margin-top e ruotata, usando il codice exact descritto in precedenza. Ma come ho detto, puoi usare qualsiasi metodo di posizionamento CSS che desideri.

Come per Ruotare l’Immagine Solo se Visti su un Telefono Cellulare o Piccolo Schermo

A questo punto, probabilmente pensare che per eseguire la rotazione solo quando l’immagine viene visualizzata su un smallscreen dispositivo come un telefono cellulare, tutto quello che dovete fare è inserire le regole di @mediasezione per il dispositivo.

Questo è vero. Fino a un certo punto. Se lo fai senza intraprendere ulteriori azioni, si probablyencounter ancora un altro problema. I fogli di stile mobile-friendly in genere hanno regole come le seguenti:

Questa regola ridimensiona le immagini grandi in modo che si adattino a schermi di piccole dimensioni. Questo è l’approccio corretto da adottare,tranne quando in realtà non si desidera ridimensionare l’immagine ma ruotarla. Con la regola di coperta sopra, l’immagine viene ridimensionata dal browser prima di essere ruotata, che non è quello che vuoi qui. Eliminerà anche i tuoi calcoli margin-top (o translateY o qualsiasi altra cosa), poiché theimage non avrà più le sue dimensioni originali.

Per risolvere il problema, aggiungere “max-width: none;” alle regole “#demo_picture“.

Con questo in mente, possiamo aggiungere tutte le regole che abbiamo accumulato finora al foglio di stile.

Supponiamo che tu abbia creato la tua pagina in base a un modello generato dalla procedura guidata di layout e che tu abbia scelto 629 pixel come punto in cui passa alla sua modalità a una colonna per dispositivi mobili phones.In in tal caso, inserire le regole subito dopo la riga “@media” nel file”styles.css“.

Se non hai utilizzato la procedura guidata di layout e non sei sicuro di come creare la tua sezione @media per i dispositivi a piccolo schermo, leggi come fare un sito Web mobile-Friendly: Responsive Design in CSS prima. Non copiare ciecamente il codice sopra.

Si noti che è necessario testare la pagina su un telefono (o una finestra del browser desktop ridimensionata per imitarne una).A seconda della larghezza e dell’altezza dell’immagine, è possibile che i risultati siano inferiori dipiacevole. Ad esempio, se l’immagine è grande, è possibile trovare l’output finale da partiallyclipped sul lato destro del telefono cellulare. In tal caso, imposta un “margin-left” sulla tua immagine con un numero appropriato per spostarla a sinistra. (Suggerimento: utilizzare i numeri negativi inmargin-left per spostare l’immagine verso sinistra oltre i suoi confini originali.)

Compatibilità browser

Le funzioni di trasformazione sono disponibili in tutti i browser moderni. Se i tuoi visitatori utilizzano Internet Explorer (che ora è obsoleto), avranno bisogno almeno della versione 9.

Copyright © 2020 Christopher Heng. Tutti i diritti riservati.
Ottieni altri suggerimenti gratuiti e articoli come questo, su web design, promozione, entrate e scripting, da https://www.thesitewizard.com/.

Trovi utile questo articolo? Si può imparare di nuovi articoli e script che vengono pubblicati onthesitewizard.comby sottoscrizione al feed RSS. Basta puntare il lettore di feed RSS o un browser che supporta i feed RSS a https://www.thesitewizard.com/ thesitewizard.XML.Si può leggere di più su come iscriversi toRSS feed del sito dal mio RSS FAQ.

Si prega di non ristampare questo articolo

Questo articolo è protetto da copyright. Si prega di non riprodurre o distribuire questo articolo in tutto o in parte, in qualsiasi forma.

• Come Allungare un Immagine di Sfondo per Riempire l’Intero Sito web (o una Colonna) in (HTML/CSS)
• Come al Centro di un Blocco DIV con i CSS
• Come al Centro di un Immagine con i CSS
• Come Creare una Scatola Rettangolare per Contenere Il Testo/Immagini con i CSS
• Come Creare Angoli Arrotondati per la Tua Casella di Confini in CSS
• Come Aggiungere una descrizione in HTML/CSS (Senza il JavaScript Necessario)
• Come Registrare Il Proprio Nome a Dominio
• è Possibile registrare un nome a dominio direttamente con ICANN, invece che attraverso un intermediario?

Nuovi Articoli

• Come Dare Alternativo Righe di una Tabella in un Colore Diverso (HTML/CSS)
• Come Generare il Libero Let’s Encrypt Certificato SSL sul Tuo (Windows) Computer
• Come Inserire i Meta Tag in una Pagina Web con BlueGriffon
• Come Suonare una Canzone (o un Altro Clip Audio) da un Elenco in un Sito di
• Come per Disegnare una Linea Orizzontale su una Pagina Web con Expression Web
• Come Creare un Sito web Gratis
• Perché non posso Fare il Backup di Qualsiasi Dominio che Voglio? C’è un modo per farla finita con un registrar del tutto?
• Qual è la differenza tra un registrar di nomi di dominio e un host Web?
• Come creare un sito Web mobile-Friendly: Responsive Design in CSS
• Qual è la differenza tra un Content Management System (CMS), un blog, un editor Web e un costruttore di siti online?

Articoli popolari

• Come creare un blog
• Come creare / creare un sito Web: la guida AZ per principianti
• Suggerimenti sulla scelta di un buon nome di dominio
• Expression Web Tutorial: Come Progettare un Sito web con Microsoft Expression Web
• Dreamweaver Tutorial: Come Progettare un Sito web con Dreamweaver CS6
• BlueGriffon Tutorial: Come Progettare un Sito web con BlueGriffon 3
• Come creare e Pubblicare il Tuo Sito web con KompoZer (tipo WYSIWYG editor web)
• Feedback Gratuito/Modulo di Contatto Guidata

Come Link a Questa Pagina

apparirà sulla tua pagina, come:

Come Ruotare un Immagine su un Sito web, se Visualizzato su un Telefono Cellulare (CSS)