• Articles
• admin

af Christopher Heng, thesitewizard.com

en besøgende spurgte mig, hvordan han kunne vende et billede, så det vises lodretnår nogen så sin hjemmeside på en mobiltelefon. Det vil sige, han ønskede, at billedet skulle vises i dets sædvanligeorientering, med den længere side vandret, på en stationær eller bærbar computer, men roteret på en telefon, så denlængere side er nu lodret.

Præambel

• denne artikel omhandler et billede, der skal vises forskelligt på computerskærmeog mobiltelefoner. Hvis du blot vil rotere et billede permanent, så det altid er i den positionuanset hvordan det ses, skal du bare bruge animage editorto do it. Det er meget enklere og mere effektivt, og det undgår de problemer, der opstår, når du får CSS todo rotationen for dig.

• et alternativ til at rotere et billede er at krympe det, så det passer til bredden på en mobiltelefonskærm. De fleste hjemmesider gør det på den måde. Hvis du foretrækker det, skal du læsehvordan du gør dine billeder mobilvenlige (responsivt Design) i stedet. Jeg har også en artikel, der viserdu skalskjule billeder på en hjemmeside, når den ses på en mobiltelefon.

• min besøgende havde en hjemmeside, der brugte 2 kolonne layout genereret Afmobile-Friendlylayout guiden, men du kan også bruge de teknikker, der er beskrevet nedenfor på en hjemmeside designet ved hjælp af ethvert layout, selvoprettet eller opnået fra andre steder. Det vil sige, metoden er en generel, der kan brugesuanset hvordan du har designet hjemmesiden.

• det er klart, at denne artikel forudsætter, at du allerede har en hjemmeside. Hvis ikke, skal du begynde med vejledningen påhvordan man opretter en hjemmeside.Du kan altid vende tilbage til denne artikel for at finjustere tingene, når du har gjort det grundlæggende design.

Sådan roteres et billede i CSS

lad os sige, at du har et billede med et id af “demo_picture”. For at rotere det skal du bruge følgende CSS.

hvis dette roterer dit billede i den forkerte retning, skal du bruge rotate(90deg) i stedet. Som dukan have gættet, kan du bruge enhver vinkel, du kan lide. Min brug af 270 og 90 grader er fordidet aktuelle emne er at dreje det, så dets længde nu er højden og omvendt.

men hvis du blot bruger ovenstående kode, vil du hurtigt bemærke et problem. Billedet roterer rundtet punkt i midten (“center”, hvis du bruger endifferentvariant af engelsk). Dette betyder, at det roterede billede overlapper indholdet over og under det.

på dette tidspunkt vil du sandsynligvis tænke, “Hmm. Det er nemt at løse. Jeg sætter bare billedet i sinegen DIV-blok med en fast højde, der giver plads nok til det roterede billede.”

så for et billede har en bredde på (sige) 202 billedpunkter og en højde på 42 billedpunkter, HTML vil se nogetsom dette:

og CSS for at give DIV-blokken den nødvendige højde er:

desværre, hvis du bruger koden som den er,vil du opdage, at mens beholderen har den nødvendige højde, vil det roterede billede stadig overlappe afsnittet over det, mens det efterlader et stort hul nedenfor, da det drejer i midten, mens det i det væsentlige forbliver, hvor det var.

tricket er at justere sin oprindelige position, før den drejes, så den endelige udgang er idet rigtige sted. For at sikre, at det roterede resultat ikke dækker nogen tekst ovenfor, men ligger kvadrati div-blokken tildelt til den, skal vi flytte den en afstand svarende til (width - height)/2nedad (hvor “/” repræsenterer delingstegnet). Du kan nemt udføre denne beregning manuelt og sætterresultaterne i CSS, eller hvis du vil efterlade en oversigt over, hvordan du har opnået det endelige nummer,lad bro.sereren gøre beregningen for dig med “calc((202px - 42px)/2)“. Du bliver selvfølgelig nødt til at ændre numrene til dem, der passer til dit billede. Jeg vil bruge calc() funktioneni denne tutorial, så det er klarere, hvordan jeg ankom til resultatet.

ændring af den øverste position kan udføres på et hvilket som helst antal måder, for eksempel med en margin-topregel, eller hvis du foretrækker at fortsætte med at bruge tranform-funktionerne,med translateY().

følgende eksempel bruger margin-top:

koden nedenfor bruger en transformeringsfunktion:

hvis du vælger at bruge translateY(), skal du sørge for, at oversættelsen er færdig førrotering, da rækkefølgen af operationer er signifikant.

demobilledet ovenfor havde sin øverste position justeret med margin-top og roteret ved hjælp af den nøjagtige kode, der er beskrevet tidligere. Men som jeg sagde, Kan du bruge enhver CSS-positioneringsmetode, du ønsker.

Sådan roteres billedet kun, når det ses på en mobiltelefon eller en lille skærm

på dette tidspunkt vil du sandsynligvis tro, at for kun at udføre rotationen, når billedet ses på en lilleskærm enhed som en mobiltelefon, er alt hvad du skal gøre at placere reglerne i @media Sektionen for den enhed.

det er sandt. Til et punkt. Hvis du gør det uden at tage yderligere handling, vil du sandsynligvisstøder endnu et problem. Mobilvenlige stilark har typisk regler som følgende:

denne regel ændrer størrelsen på store billeder, så de passer på små skærme. Dette er den rigtige tilgang at tage,undtagen når du faktisk ikke ønsker, at billedet skal ændres, men roteres. Med ovenstående tæpperegel ændres billedet af bro.ser, før det roteres, hvilket ikke er det, du vil have her. Det vil også smide dine margin-top (eller translateY eller hvad som helst) beregninger, da billedet ikke længere har sine oprindelige dimensioner.

for at rette det, tilføj “max-width: none;” til “#demo_picture ” reglerne.

med dette i tankerne kan vi tilføje alle de regler, vi hidtil har akkumuleret, til stilarket.

lad os sige, at du har oprettet din side baseret på en skabelon genereret af guiden layout, og du valgte 629 billedpunkter som det punkt, hvor den skifter til sin en-kolonne-tilstand til mobil phones.In i et sådant tilfælde skal du indsætte reglerne lige efter linjen” @media“i filen”styles.css“.

hvis du ikke brugte Layoutguiden og heller ikke er sikker på, hvordan du opretter din egen @media sektion for små skærmenheder, læs venligsthvordan man laver en mobilvenlig hjemmeside: responsivt Design i CSS først. Du må ikke blindt kopiere ovenstående kode.

Bemærk, at du bliver nødt til at teste siden på en telefon (eller et skrivebordsvindue, der er ændret til at efterligne en).Afhængigt af bredden og højden af dit billede, kan du finde resultaterne til at være mindre endglædelig. For eksempel, hvis billedet er stort, kan du finde den endelige udgang, der skal delvistklippes på højre side af mobiltelefonen. I så fald skal du indstille en “margin-left” pådit billede med et passende nummer for at flytte det til venstre. (Tip: Brug negative tal imargin-left til at flytte billedet til venstre ud over dets oprindelige grænser.)

bro.ser Kompatibilitet

transformeringsfunktionerne er tilgængelige i alle moderne bro. Serere. Hvis dine besøgende bruger Internetudforsker (som nu er forældet), skal de mindst bruge version 9.

Ophavsret 2020 Christopher Heng. Alle rettigheder forbeholdes.
få flere gratis tips og artikler som denne,på nettet design, fremme, indtægter og scripting, fra https://www.thesitewizard.com/.

finder du denne artikel nyttig? Du kan lære om nye artikler og scripts, der udgives påhesitteen.comby abonnere på RSS-feed. Du skal blot pege på din RSS-feedlæser eller en bro.ser, der understøtter RSS-feeds påhttps://www.thesitewizard.com/.- LML.Du kan læse mere om, hvordan du abonnerer toRSS site feeds fra min RSS ofte stillede spørgsmål.

Vær venlig ikke at genoptrykke denne artikel

denne artikel er ophavsretligt beskyttet. Du må ikke reproducere eller distribuere denne artikel helt eller delvist, i nogen form.

• Sådan strækker du et baggrundsbillede for at udfylde hele hjemmesiden (eller en kolonne af Det) (HTML/CSS)
• sådan centreres en DIV-blok ved hjælp af CSS
• sådan centreres et billede med CSS
• Sådan oprettes en rektangulær boks til at indeholde din tekst/billeder med CSS
• Sådan oprettes afrundede hjørner til din boks grænser i CSS
• Sådan tilføjes et værktøjstip i HTML/CSS (ingen JavaScript nødvendig)
• Sådan registreres dit eget domænenavn
• kan du registrere et domænenavn direkte hos ICANN i stedet for gennem en mellemmand?

nye artikler

• Sådan giver du alternative rækker af en tabel en anden farve (HTML/CSS)
• sådan genererer du det gratis lad os kryptere SSL-certifikat på din egen Computer
• Sådan indsættes metatags på en hjemmeside med BlueGriffon
• Sådan spiller du en sang (eller et andet lydklip) fra en liste på en hjemmeside
• Sådan tegner du en vandret linje på en hjemmeside med udtryk
• Sådan opretter du en hjemmeside gratis
• Hvorfor kan jeg ikke oprette et domæne, Jeg ønsker? Er der en måde at gøre op med en registrator helt?
• Hvad er forskellen mellem en domæneregistrator og en Host?
• Hvordan laver man en mobilvenlig hjemmeside: responsivt Design i CSS
• Hvad er forskellen mellem et Content Management System (CMS), en Blog, en Internet Editor og en online Site Builder?

populære artikler

• Sådan opretter du en Blog
• Sådan laver du / opretter du en hjemmeside: Begynderens vejledning
• Tips til valg af et godt domænenavn
• udtryk: Hvordan til at designe en hjemmeside med Microsoft udtryk hjemmeside
• Drømmevæver Tutorial: Hvordan til at designe en hjemmeside med Drømmevæver CS6
• BlueGriffon Tutorial: Hvordan til at designe en hjemmeside med BlueGriffon 3
• sådan designe og udgive din hjemmeside med komponist
• gratis Feedback/kontakt formular guiden

sådan linkes til denne side

det vises på din side som:

Sådan roteres et billede på en hjemmeside, når det ses på en mobiltelefon (CSS)