• Articles
• admin

de Christopher Heng, thesitewizard.com

un vizitator m-a întrebat cum ar putea transforma o imagine astfel încât să fie afișată verticalcând cineva și-a văzut pagina web pe un telefon mobil. Adică, el a vrut ca imaginea să fie afișată în mod obișnuitorientare, cu partea mai lungă orizontală, pe un computer desktop sau laptop, dar rotită pe un telefon, așa căpartea mai lungă este acum verticală.

Preambul

• acest articol se referă la o imagine care trebuie să fie afișate în mod diferit pe monitoare de calculatorși telefoane mobile. Dacă pur și simplu doriți să rotiți o imagine permanent, astfel încât să fie întotdeauna în acea pozițieindiferent de modul în care este vizualizată, ar trebui să utilizați doar Animage editorpentru a face acest lucru. Este mult mai simplu și mai eficient și evită problemele care apar atunci când obțineți CSS todo rotația pentru dvs.

• o alternativă la rotirea unei imagini este micșorarea acesteia pentru a se potrivi lățimii ecranului unui telefon mobil. Cele mai multe site-uri web o fac în acest fel. Dacă preferați acest lucru, vă rugăm să readHowto face imaginile mobile-Friendly (design receptiv) în schimb. Am, de asemenea, un articol care aratăascunde imaginile pe un site web atunci când este vizualizat pe un telefon mobil.

• vizitatorul meu a avut un site web care a folosit aspectul coloanei 2 generat de expertul mobil-FriendlyLayout, dar puteți utiliza și tehnicile descrise mai jos pe un site web proiectat utilizândorice aspect, auto-creat sau obținut din altă parte. Adică, metoda este una generală care poate fi utilizatăindiferent de modul în care ați proiectat site-ul.

• evident, acest articol presupune că aveți deja un site web. Dacă nu, începeți cu ghidulcum să creați un site web.Puteți reveni întotdeauna la acest articol pentru a regla lucrurile după ce ați terminat designul de bază.

cum se rotește o imagine în CSS

să presupunem că aveți o imagine cu un id de „demo_picture”. Pentru ao roti, utilizați următorul CSS.

dacă aceasta rotește imaginea în direcția greșită, utilizați rotate(90deg) în schimb. După cum ați ghicit, puteți folosi orice unghi doriți. Utilizarea mea de 270 și 90 degress este pentru căsubiectul la îndemână este să-l transformăm astfel încât lungimea sa să fie acum înălțimea și invers.

cu toate acestea, dacă utilizați pur și simplu codul de mai sus, veți observa rapid o problemă. Imaginea se rotește în jurul valorii deun punct în centrul său („centru”, dacă utilizați adifferentvariant de limba engleză). Aceasta înseamnă că imaginea rotită se va suprapune peste conținutul de deasupra și dedesubtul acesteia.

în acest moment, probabil vă veți gândi: „Hmm. E ușor de rezolvat. Voi pune doar imaginea în eapropriul bloc DIV cu o înălțime fixă care oferă suficient spațiu pentru imaginea rotită.”

deci, pentru o imagine are o lățime de (să zicem) 202 pixeli și o înălțime de 42 de pixeli, HTML va arata cevaca aceasta:

și CSS pentru a da blocului DIV înălțimea necesară este:

din păcate, dacă utilizați codul așa cum este, veți descoperi că,în timp ce containerul are înălțimea necesară, imaginea rotită se va suprapune în continuare paragrafului de deasupra acestuia, lăsând în același timp un decalaj mare mai jos, deoarecese pivotează în centrul său, rămânând în esență acolo unde era.

trucul este de a ajusta poziția inițială înainte de rotirea acestuia, astfel încât ieșirea finală este inlocul corect. Pentru a vă asigura că rezultatul rotit nu acoperă niciun text de mai sus, ci se află pătratîn blocul DIV alocat pentru acesta, trebuie să îl mutăm la o distanță egală cu (width - height)/2în jos (unde „/” reprezintă semnul de divizare). Puteți efectua cu ușurință acest calcul manual și puneți-lrezultatele în CSS sau,dacă doriți să lăsați o înregistrare a modului în care ați obținut numărul final, lăsați browserul să facă calculul pentru dvs., cu „calc((202px - 42px)/2)„. Desigur, va trebui să schimbați numerele cu cele potrivite pentru imaginea dvs. Voi folosi funcția calc() în acest tutorial, astfel încât să fie mai clar cum am ajuns la rezultat.

schimbarea poziției de sus se poate face în orice număr de moduri, de exemplu, cu o regulă margin-top sau dacă preferați să continuați să utilizați funcțiile tranform,cu translateY().

următorul exemplu utilizează margin-top:

codul de mai jos utilizează o funcție de transformare:

dacă alegeți să utilizați translateY(), asigurați-vă că traducerea se face înainte de therotation, deoarece ordinea operațiilor este semnificativă.

imaginea demo de mai sus a avut poziția sa superioară ajustată cu margin-top și rotită, folosind codul exact descris anterior. Dar, așa cum am spus, puteți utiliza orice metodă de poziționare CSS doriți.

cum să rotiți imaginea numai atunci când este vizualizată pe un telefon mobil sau pe un ecran mic

în acest moment, probabil că veți crede că pentru a efectua rotația numai atunci când imaginea este vizualizată pe un dispozitiv cu ecran mic, cum ar fi un telefon mobil, tot ce trebuie să faceți este să plasați Regulile în secțiunea @media pentru acel dispozitiv.

este adevărat. Până la un punct. Dacă o faceți fără a lua măsuri suplimentare, probabil că veți întâmpina încă o problemă. Foi de stil mobile-friendly au de obicei reguli, cum ar fi următoarele:

această regulă redimensionează imaginile mari astfel încât să se potrivească pe ecrane mici. Aceasta este abordarea corectă de luat,cu excepția cazului în care nu doriți de fapt ca imaginea să fie redimensionată, ci rotită. Cu regula de pătură de mai sus, imaginea este redimensionată de browser înainte de a fi rotită, ceea ce nu este ceea ce doriți aici. De asemenea, va arunca calculele margin-top (sau translateY sau orice altceva), deoarece imaginea nu va mai avea dimensiunile sale originale.

pentru a remedia acest lucru, adăugați „max-width: none;” la regulile „#demo_picture„.

având în vedere acest lucru, putem adăuga toate regulile pe care le-am acumulat până acum la foaia de stil.

să presupunem că ați creat pagina dvs. pe baza unui șablon generat de expertul de aspect și ați ales 629 pixeli ca punct în care trece la modul său cu o singură coloană pentru mobil phones.In într-un astfel de caz, introduceți Regulile imediat după linia „@media” din fișierul”styles.css„.

dacă nu ați utilizat expertul aspect, și nu sunt, de asemenea, sigur cum de a crea propriul @media sectionfor dispozitive cu ecran mic, vă rugăm să citițicum tomface un site mobil-Friendly: design receptiv în CSS primul. Nu copiați orbește codul de mai sus.

rețineți că va trebui să testați pagina pe un telefon (sau o fereastră de browser desktop redimensionată pentru a imita una).În funcție de lățimea și înălțimea imaginii dvs., este posibil ca rezultatele să fie mai mici decâtplăcere. De exemplu, dacă imaginea este mare, este posibil să găsiți ieșirea finală care urmează să fie parțialăclipit în partea dreaptă a telefonului mobil. Dacă da, setați „margin-left” imaginea dvs. cu un număr adecvat pentru ao muta spre stânga. (Sfat: utilizați numere negative înmargin-left pentru a muta imaginea spre stânga dincolo de limitele sale originale.)

Compatibilitate Browser

funcțiile de transformare sunt disponibile în toate browserele moderne. Dacă vizitatorii dvs. utilizează Internet Explorer (care este acum învechit), vor avea nevoie de cel puțin versiunea 9.

Drepturi De Autor 2020 Christopher Heng. Toate drepturile rezervate.
obțineți mai multe sfaturi gratuite și articole de genul acesta,despre web design, promovare, venituri și scripting, de la https://www.thesitewizard.com/.

vi se pare util acest articol? Puteți afla de noi articole și script-uri care sunt publicate onthesitewizard.comby abonarea la RSS feed. Pur și simplu punctul cititorul RSS feed sau un browser care acceptă fluxuri RSS lahttps://www.thesitewizard.com/thesitewizard.xml.Puteți citi mai multe despre cum să vă abonați la feed-urile site-ului toRSS din FAQ-ul meu RSS.

vă rugăm să nu retipăriți acest articol

acest articol este protejat prin drepturi de autor. Vă rugăm să nu reproduceți sau să distribuiți acest articol integral sau parțial, sub nicio formă.

• cum să întindeți o imagine de fundal pentru a umple întregul site web (sau o coloană a acestuia) (HTML/CSS)
• cum să centrați un bloc DIV folosind CSS
• cum să centrați o imagine cu CSS
• cum să creați o casetă dreptunghiulară care să conțină textul/imaginile dvs. cu CSS
• cum să creați colțuri rotunjite pentru box borders în CSS
• cum să adăugați un tooltip în HTML/CSS (nu JavaScript necesar)
• cum să vă înregistrați propriul nume de domeniu
• puteți înregistra un nume de domeniu direct cu ICANN în loc de printr-un intermediar?

articole noi

• cum să dați rânduri alternative ale unui tabel o culoare diferită (HTML/CSS)
• cum să generați certificatul SSL gratuit Let ‘ s Encrypt pe computerul Dvs. (Windows)
• cum să inserați Meta Tag-uri într-o pagină web cu BlueGriffon
• cum să redați un melodie (sau alt clip audio) dintr-o listă de pe un site web
• cum să desenez o linie orizontală pe o pagină web cu Expression Web
• cum să creez un site web gratuit
• de ce nu pot alcătui Niciun Domeniu pe care îl vreau? Există o modalitate de a face departe cu un registrator cu totul?
• care este diferența dintre un registrator de nume de domeniu și o gazdă Web?
• cum se face un site web prietenos pentru mobil: design receptiv în CSS
• care este diferența dintre un sistem de gestionare a conținutului (CMS), un Blog, Un Editor Web și un constructor de Site-uri Online?

articole populare

• cum se creează un Blog
• cum se face / se creează un site web: Ghidul az pentru începători
• sfaturi despre alegerea unui nume de domeniu bun
• Expression Web Tutorial: Cum de a proiecta un site web cu Microsoft Expression Web
• Dreamweaver Tutorial: Cum de a proiecta un site web cu Dreamweaver CS6
• BlueGriffon Tutorial: Cum de a proiecta un site web cu BlueGriffon 3
• Cum de a proiecta și publica site-ul dvs. web cu KompoZer (gratuit WYSIWYG Web editor)
• Feedback gratuit/formular de contact Wizard

cum să vă conectați la această pagină

va apărea pe pagina dvs. ca:

cum să rotiți o imagine pe un site web când este vizualizată pe un telefon mobil (CSS)