• Articles
• admin

av Christopher Heng, thesitewizard.com

en besökare frågade mig hur han kunde vända en bild så att den visas vertikalt när någon tittade på sin webbsida på en mobiltelefon. Det vill säga han ville att bilden skulle visas i sin vanligaorientering, med den längre sidan horisontell, på en stationär eller bärbar dator, men roteras på en telefon, så desslängre sidan är nu vertikal.

Ingress

• den här artikeln handlar om en bild som måste visas annorlunda på datorskärmaroch mobiltelefoner. Om du helt enkelt vill rotera en bild permanent så att den alltid är i den positionenoavsett hur den ses, bör du bara använda animage editorför att göra det. Det är mycket enklare och effektivare, och det undviker de problem som uppstår när du får CSS todo rotationen för dig.

• ett alternativ till att rotera en bild är att krympa den så att den passar bredden på en mobiltelefonskärm. Mostwebsites gör det på det sättet. Om du föredrar det, läs om hurför att göra dina bilder mobilvänliga (responsiv Design) istället. Jag har också en artikel som visardöm bilder på en webbplats när den visas på en mobiltelefon.

• min besökare hade en webbplats som använde 2 kolumn layout som genereras av theMobile-FriendlyLayout Wizard, men du kan också använda de tekniker som beskrivs nedan på en webbplats utformad usingany layout, själv skapat eller erhållits från annat håll. Det vill säga metoden är en allmän som kan användasoavsett hur du utformade webbplatsen.

• självklart förutsätter den här artikeln att du redan har en webbplats. Om inte, börja med guiden påhur man skapar en webbplats.Du kan alltid återgå till den här artikeln för att finjustera saker efter att du har gjort den grundläggande designen.

hur man roterar en bild i CSS

låt oss säga att du har en bild med ett id för ”demo_picture”. För att rotera den, använd följande CSS.

om detta roterar din bild i fel riktning, använd istället rotate(90deg). Som dukan ha gissat kan du använda vilken vinkel du vill. Min användning av 270 och 90 degress är för attämnet till hands är att vrida det så att dess längd nu är höjden och vice versa.

men om du bara använder ovanstående kod kommer du snabbt att märka ett problem. Bilden roterar runten punkt i centrum (”center” om du använder adifferentvariant av engelska). Det betyder att den roterade bilden överlappar innehållet ovanför och under det.

vid denna tidpunkt kommer du förmodligen att tänka, ”Hmm. Det är lätt att lösa. Jag lägger bara bilden i desseget DIV-block med en fast höjd som ger tillräckligt med utrymme för den roterade bilden.”

så, för en bild har en bredd på (säg) 202 pixlar och en höjd av 42 pixlar, kommer HTML att se någotsom detta:

och CSS för att ge DIV-blocket den nödvändiga höjden är:

tyvärr, om du använder koden som den är,kommer du att upptäcka att medan behållaren har den nödvändiga höjden, kommer den roterade bilden fortfarande att överlappa stycket ovanför den medan du lämnar ett stort gap nedan, eftersom det svänger i mitten, medan det fortfarande är väsentligen där det var.

tricket är att justera sin ursprungliga position innan du roterar den, så att den slutliga utgången är rätt plats. För att säkerställa att det roterade resultatet inte täcker någon text ovan, men ligger kvadrati det Div-block som tilldelats för det, måste vi flytta det ett avstånd som är lika med (width - height)/2nedåt (där ”/” representerar delningstecknet). Du kan enkelt utföra denna beräkning manuellt och sättaresultaten i CSS, eller, om du vill lämna ett register över hur du fick det slutliga numret,låt webbläsaren göra beräkningen för dig, med ”calc((202px - 42px)/2)”. Du måste naturligtvis ändra siffrorna till de som är lämpliga för din bild. Jag kommer att använda funktionen calc() i denna handledning så att det är tydligare hur jag kom fram till resultatet.

ändra toppositionen kan göras på valfritt antal sätt, till exempel med en margin-top – regel, eller om du föredrar att fortsätta använda tranform-funktionerna,med translateY().

följande exempel använder margin-top:

koden nedan använder en transform-funktion:

om du väljer att använda translateY(), se till att översättningen är klar förerotation, eftersom orderordningen är betydande.

demobilden ovan hade sin topposition justerad med margin-top och roterad, med hjälp av den tidigare beskrivna exaktkoden. Men som sagt kan du använda vilken CSS-positioneringsmetod du vill ha.

hur man roterar bilden endast när den visas på en mobiltelefon eller liten skärm

vid denna tidpunkt kommer du förmodligen att tro att för att utföra rotationen endast när bilden visas på en smallscreen-enhet som en mobiltelefon är allt du behöver göra för att placera reglerna i avsnittet @mediaför den enheten.

det är sant. Till en punkt. Om du gör det utan att vidta några ytterligare åtgärder kommer du förmodligen att stöta på ännu ett problem. Mobilvänliga stilark har vanligtvis regler som följande:

denna regel ändrar storlek på stora bilder så att de passar på små skärmar. Det här är rätt sätt att ta,förutom när du inte vill att bilden ska ändras men roteras. Med ovanstående filtregel ändras bilden av webbläsaren innan den roteras, vilket inte är vad du vill ha här. Det kommer också att kasta bort dina margin-top (eller translateY eller vad som helst) beräkningar, eftersom bilden inte längre har sina ursprungliga dimensioner.

för att fixa det, lägg till ”max-width: none;” till ”#demo_picture ” – reglerna.

med detta i åtanke kan vi lägga till alla regler som vi hittills har samlat på stilarket.

låt oss säga att du har skapat din sida baserat på en mall genererad avlayout Wizard, och du valde 629 pixlar som den punkt där den växlar till sitt en-kolumnläge för Mobil phones.In i ett sådant fall, sätt in reglerna strax efter raden ”@media” i filen”styles.css”.

om du inte använde Layoutguiden och inte heller är säker på hur du skapar ditt eget @media avsnittför små skärmenheter, läshur mangör en mobilvänlig webbplats: responsiv Design I CSS först. Kopiera inte blint ovanstående kod.

Observera att du måste testa sidan på en telefon (eller ett skrivbords webbläsarfönster som ändras för att efterlikna en).Beroende på bredden och höjden på din bild kan du hitta resultaten att vara mindre ännöje. Till exempel, om bilden är stor, kan du hitta den slutliga utgången som ska delvisklippas på höger sida av mobiltelefonen. Om så är fallet, ställ in en ”margin-left ” pådin bild med ett lämpligt nummer för att flytta den till vänster. (Tips: Använd negativa tal imargin-left för att flytta bilden åt vänster bortom dess ursprungliga gränser.)

webbläsarkompatibilitet

transformeringsfunktionerna är tillgängliga i alla moderna webbläsare. Om dina besökare använder Internet Explorer (som nu är föråldrad) behöver de minst version 9.

Copyright Brasilien 2020 Christopher Heng. Alla rättigheter förbehållna.
få fler Gratis tips och artiklar som detta,om webbdesign, marknadsföring, intäkter och skript, från https://www.thesitewizard.com/.

hittar du den här artikeln användbar? Du kan lära av nya artiklar och skript som publiceras onthesitewizard.comby prenumerera på RSS-flöde. Helt enkelt peka din RSS-läsare eller en webbläsare som stöder RSS-flöden påhttps://www.thesitewizard.com/ thesitewizard.xml.Du kan läsa mer om hur du prenumererar på toRSS webbplatsflöden från min RSS FAQ.

vänligen skriv inte ut den här artikeln

den här artikeln är upphovsrättsskyddad. Vänligen reproducera eller distribuera inte denna artikel helt eller delvis, i någon form.

• hur man sträcker en bakgrundsbild för att fylla hela webbplatsen (eller en kolumn av den) (HTML/CSS)
• hur man Centrerar ett DIV-Block med CSS
• hur man Centrerar en bild med CSS
• hur man skapar en rektangulär ruta för att innehålla din Text/bilder med CSS
• hur man skapar rundade hörn för box gränser i CSS
• hur man lägger till ett verktygstips i HTML/CSS (ingen Javascript behövs)
• hur man registrerar ditt eget domännamn
• kan du registrera ett domännamn direkt med ICANN istället för genom en mellanhand?

Nya artiklar

• hur man ger alternativa rader i ett bord en annan färg (HTML/CSS)
• hur man genererar det fria Låt oss kryptera SSL-certifikatet på din egen (Windows) dator
• hur man sätter in metataggar på en webbsida med BlueGriffon
• hur man spelar en låt (eller något annat ljudklipp) från en lista på en webbplats
• hur man ritar en horisontell linje på en webbsida med Expression Web
• hur man skapar en webbplats gratis
• Varför kan jag inte skapa någon domän Jag vill ha? Finns det något sätt att göra sig av med en registrator helt och hållet?
• Vad är skillnaden mellan en domännamnsregistrator och en webbhotell?
• hur man gör en mobilvänlig webbplats: responsiv Design I CSS
• Vad är skillnaden mellan ett Content Management System (CMS), en blogg, en webbredaktör och en online-webbplatsbyggare?

populära artiklar

• hur man skapar en blogg
• hur man gör / Skapar en webbplats: nybörjarens A-Z-Guide
• Tips om att välja ett bra domännamn
• Expression Web Tutorial: Hur man designar en webbplats med Microsoft Expression Web
• Dreamweaver Tutorial: Hur man designar en webbplats med Dreamweaver CS6
• BlueGriffon Tutorial: Hur man designar en webbplats med BlueGriffon 3
• hur man designar och publicerar din webbplats med KompoZer (gratis WYSIWYG web editor)
• gratis Feedback/kontaktformulär guiden

hur man länkar till den här sidan

det kommer att visas på din sida som:

hur man roterar en bild på en webbplats när den visas på en mobiltelefon (CSS)