• Articles
• admin

Av Christopher Heng, thesitewizard.com

en besøkende spurte meg hvordan han kunne slå et bilde slik at det vises vertikaltnår noen så på sin nettside på en mobiltelefon. Det vil si at han ønsket at bildet skulle vises i sin vanligeorientering, med den lengre siden horisontal, på en stasjonær eller bærbar datamaskin, men rotert på en telefon, så denlengre siden er nå vertikal.

Innledning

• denne artikkelen omhandler et bilde som må vises annerledes på dataskjermerog mobiltelefoner. Hvis du bare vil rotere et bilde permanent slik at det alltid er i den posisjonenuansett hvordan det vises, bør du bare bruke animage editorto gjøre det. Det er mye enklere og mer effektivt, og det unngår problemene som oppstår når DU får CSS todo rotasjonen for deg.

• et alternativ til å rotere et bilde er å krympe det for å passe bredden på en mobilskjerm. Mostwebsites gjør det på den måten. Hvis du foretrekker det, vennligst leshvordan Lage Bildene Dine Mobilvennlige (Responsive Design) i stedet. Jeg har også en artikkel som viserdu hvordan duskjul bilder på et nettsted når det vises på en mobiltelefon.

• Min besøkende hadde et nettsted som brukte 2 kolonneoppsettet generert av theMobile-FriendlyLayout Wizard, men Du kan også bruke teknikkene beskrevet nedenfor på et nettsted designet ved hjelp av noen layout, selvlaget eller hentet fra andre steder. Det vil si at metoden er en generell som kan brukesuansett hvordan du utformet nettstedet.

• Selvfølgelig forutsetter denne artikkelen at du allerede har et nettsted. Hvis ikke, vennligst begynn med guiden påhvordan Lage Et Nettsted.Du kan alltid gå tilbake til denne artikkelen for å finjustere ting etter at du har gjort det grunnleggende designet.

Hvordan Rotere Et Bilde i CSS

La oss si at du har et bilde med en id på «demo_picture». For å rotere den, bruk FØLGENDE CSS.

hvis dette roterer bildet i feil retning, bruk rotate(90deg) i stedet. Som dukan ha gjettet, kan du bruke hvilken som helst vinkel du liker. Min bruk av 270 og 90 degress er forditemaet ved hånden er å snu det slik at lengden er nå høyden og omvendt.

men hvis du bare bruker koden ovenfor, vil du raskt merke et problem. Bildet roterer rundtet punkt i midten («senter» hvis du bruker adifferentvariant av engelsk). Dette betyr at det roterte bildet overlapper innholdet over og under det.

På dette punktet vil du sannsynligvis tenke, » Hmm . Det er lett å løse. Jeg skal bare sette bildet i itsown DIV blokk med en fast høyde som gir nok plass til det roterte bildet.»

Så, for et bilde har en bredde på (si) 202 piksler og en høyde på 42 piksler, VIL HTML se noesom dette:

OG CSS for å gi div-blokken den nødvendige høyden er:

Dessverre, hvis du bruker koden som den er, vil du oppdage at mens beholderen har den nødvendige høyden, vil det roterte bildet fortsatt overlappe avsnittet over det mens du forlater et stort gap under, sidendet svinger på midten, mens det fortsatt er der det var.

trikset er å justere sin opprinnelige posisjon før du roterer den, slik at den endelige utgangen er på riktig sted. For å sikre at det roterte resultatet ikke dekker noen tekst over, men ligger kvadratisk i DIV-blokken som er tildelt for den, må vi flytte den en avstand lik (width - height)/2nedover (hvor » / » representerer divisjonstegnet). Du kan enkelt utføre denne beregningen manuelt og setteresultatene i CSS, eller,hvis du vil legge igjen en oversikt over hvordan du fikk det endelige nummeret, la nettleseren gjøre beregningen for deg, med»calc((202px - 42px)/2)«. Du må selvfølgelig endre tallene til de som passer for bildet ditt. Jeg vil bruke funksjonen calc() i denne opplæringen slik at det er tydeligere hvordan jeg kom til resultatet.

Endring av topplasseringen kan gjøres på en rekke måter, for eksempel med en margin-top – regel, eller hvis du foretrekker å fortsette å bruke tranform-funksjonene,med translateY().

følgende eksempel bruker margin-top:

koden nedenfor bruker en transformasjonsfunksjon:

hvis du velger å bruke translateY(), må du sørge for at oversettelsen er ferdig før rotasjonen, siden rekkefølgen på operasjonene er betydelig.

demobildet ovenfor hadde sin toppposisjon justert med margin-top og rotert, ved hjelp av den eksakte koden som er beskrevet tidligere. Men som sagt, kan du bruke HVILKEN SOM HELST CSS-posisjoneringsmetode du vil ha.

Slik Roterer Du Bildet Bare Når Det Vises På En Mobiltelefon Eller Liten Skjerm

På dette punktet vil du sannsynligvis tenke at for å utføre rotasjonen bare når bildet vises på en litenscreen-enhet som en mobiltelefon, er alt du trenger å gjøre å plassere reglene i @media – delen for den enheten.

det er sant. Til et punkt. Hvis du gjør det uten å ta ytterligere tiltak, vil du sannsynligvismøter enda et problem. Mobilvennlige stilark har vanligvis regler som følgende:

denne regelen endrer størrelsen på store bilder slik at de passer på små skjermer. Dette er den riktige tilnærmingen å ta, bortsett fra når du egentlig ikke vil at bildet skal endres, men roteres. Med ovennevnte tepperegel blir bildet endret av nettleseren før det roteres, noe som ikke er det du vil ha her. Det vil også kaste av margin-top (eller translateY eller hva som helst) beregninger, siden bildet ikke lenger har sine opprinnelige dimensjoner.

for å fikse det, legg til «max-width: none;» til «#demo_picture » – reglene.

Med dette i tankene kan vi legge til alle reglene vi har samlet så langt til stilarket.

la oss si at du har opprettet siden din basert på en mal generert av layoutveiviseren, og du valgte 629 piksler som punktet der den bytter til sin en-kolonne modus for mobil phones.In i et slikt tilfelle, sett inn reglene like etter» @media «- linjen i»styles.css » – filen.

hvis Du ikke brukte Layoutveiviseren, og er heller ikke sikker på hvordan du lager din egen @media -seksjonfor små skjermenheter, vennligst leshvordan lage Et Mobilvennlig Nettsted: Responsivt Design i CSS først. Ikke blindt kopiere koden ovenfor.

Merk at du må teste siden på en telefon(eller et skrivebordsvindu som skaleres for å etterligne en).Avhengig av bredden og høyden på bildet, kan du finne resultatene å være mindre ennbehagelig. For eksempel, hvis bildet er stort, kan du finne den endelige utgangen å være delvisklippet på høyre side av mobiltelefonen. Hvis ja, sett en «margin-left » påbildet ditt med et passende nummer for å flytte det til venstre. (Tips!: bruk negative tall i margin-left til å flytte bildet til venstre utover de opprinnelige grensene.)

Nettleserkompatibilitet

transform-funksjonene er tilgjengelige i alle moderne nettlesere. Hvis de besøkende bruker Internet Explorer (som nå er foreldet), trenger de minst versjon 9.

Copyright © 2020 Christopher Heng. Alle rettigheter reservert.
Få flere gratis tips og artikler som dette,på webdesign, markedsføring, inntekter og skripting, fra https://www.thesitewizard.com/.

finner du denne artikkelen nyttig? Du kan lære av nye artikler og skript som er publisert påthesitewizard.comby abonnere PÅ RSS-feed. Bare peke RSS-feed-leser eller en nettleser som støtter RSS-feeds på https://www.thesitewizard.com/thesitewizard.xml.Du kan lese mer om hvordan du abonnerer toRSS nettsted feeds fra MIN RSS FAQ.

Vennligst Ikke Skriv Ut Denne Artikkelen

denne artikkelen er opphavsrettsbeskyttet. Vennligst ikke reprodusere eller distribuere denne artikkelen helt eller delvis, i noen form.

• Slik Strekker Du Et Bakgrunnsbilde For Å Fylle Hele Nettstedet (ELLER En Kolonne av Det) (HTML/CSS)
• Slik Sentrerer DU EN DIV-Blokk Ved HJELP AV CSS
• Slik Sentrerer Du Et Bilde med CSS
• Slik Lager Du En Rektangulær Boks for Å Inneholde Teksten/Bildene dine med CSS
• Slik Lager Du Avrundede Hjørner for Din box borders in css
• Hvordan Legge Til Et Verktøytips i html/css (ingen javascript nødvendig)
• hvordan registrere ditt eget domenenavn
• kan du registrere et domenenavn direkte med icann i stedet for Gjennom en mellommann?

Nye Artikler

• Slik Gir Du Alternative Rader I Et Bord En Annen Farge (HTML/CSS)
• Slik Genererer Du Gratis La Oss Kryptere SSL-Sertifikatet På Din Egen (Windows) Datamaskin
• Slik Setter Du Inn Metakoder på En Nettside Med BlueGriffon
• Slik Spiller Du En Sang (eller et annet lydklipp) fra en liste på et nettsted
• Hvordan Tegne En Horisontal Linje På En Nettside Med Expression Web
• HVORDAN LAGE et nettsted gratis
• Hvorfor KAN jeg IKKE LAGE Et Domene Jeg Vil Ha? Er Det En Måte Å Gjøre Unna Med En Registrar Helt?
• Hva Er Forskjellen mellom En Domenenavnregistrator og En Webverten?
• Hvordan Lage Et Mobilvennlig Nettsted: Responsivt Design i CSS
• Hva Er Forskjellen mellom Et Innholdsstyringssystem (CMS), En Blogg, En Webredaktør og En Nettstedbygger?

Populære Artikler

• Hvordan Lage En Blogg
• Hvordan Lage / Lage Et Nettsted: Nybegynnerens A-Z Guide
• Tips om Hvordan Du Velger Et Godt Domenenavn
• Expression Web Tutorial: Hvordan Designe Et Nettsted Med Microsoft Expression Web
• Dreamweaver Tutorial: Hvordan Å Designe Et Nettsted Med Dreamweaver CS6
• BlueGriffon Tutorial: Hvordan Å Designe Et Nettsted Med BlueGriffon 3
• Hvordan Å Designe Og Publisere Ditt Nettsted Med KompoZer (gratis wysiwyg web editor)
• Gratis Tilbakemelding/Kontaktskjema Veiviser

Slik Kobler Du Til Denne Siden

det vises PÅ Siden DIN SOM:

Slik Roterer Du Et Bilde På et nettsted når det vises På En Mobiltelefon (Css)