21 tammikuun, 2022

kuinka pyörittää kuvaa verkkosivustolla, kun sitä katsotaan matkapuhelimella (CSS)

by Christopher Heng, thesitewizard.com

eräs vierailija kysyi minulta, miten hän voisi kääntää kuvan niin, että se näkyy vertikaalisesti, kun joku katsoo hänen verkkosivuaan kännykällä. Toisin sanoen hän halusi, että kuva näytetään sen yleisessä suuntauksessa, jossa pidempi puoli on vaakasuorassa, pöytäkoneella tai kannettavalla tietokoneella, mutta pyöritetään puhelimella, joten senpitkä puoli on nyt pystysuora.

Johdanto

  • tässä artikkelissa käsitellään kuvaa, joka on näytettävä eri tavalla tietokoneen monitoreissa ja matkapuhelimissa. Jos haluat vain kiertää kuvaa pysyvästi niin, että se on aina siinä asennossa riippumatta siitä, miten sitä katsotaan, sinun pitäisi vain käyttää animage editorto tehdä se. Se on paljon yksinkertaisempi ja tehokkaampi, ja se välttää ongelmia, jotka syntyvät, kun saat CSS todo kierto sinulle.

  • vaihtoehtona kuvan pyörimiselle on sen kutistaminen sopivaksi matkapuhelimen näytön leveydelle. Useimmat tekevät niin. Jos haluat, että, lue, miten voit tehdä kuvia mobiili-ystävällinen (reagoiva muotoilu) sijaan. Minulla on myös artikkeli, joka näyttää, miten voit piilottaa kuvia verkkosivuilla, kun sitä katsotaan matkapuhelimella.

  • vierailijani oli sivusto, joka käytti 2 sarakkeen asettelun luoma theMobile-Friendlyayout Wizard, mutta voit myös käyttää tekniikoita kuvattu alla verkkosivuilla suunniteltu usingany layout, itse luotu tai saatu muualta. Toisin sanoen, menetelmä on yleinen, jota voidaan käyttää riippumatta siitä, miten olet suunnitellut sivuston.

  • ilmeisesti, tämä artikkeli edellyttää, että sinulla on jo verkkosivusto. Jos ei, aloita opas miten luoda verkkosivuilla.Voit aina palata tähän artikkeliin hienosäätää asioita, kun saat perussuunnittelun tehtyä.

kuinka kiertää kuvaa CSS: ssä

sanotaan, että sinulla on kuva, jonka tunnus on ”demo_picture”. Voit kiertää sitä käyttämällä seuraavaa CSS: ää.

#demo_kuva { transform: rotate(270deg); }

jos tämä pyörittää kuvaasi väärään suuntaan, käytä rotate(90deg) sen sijaan. Kuten Olet ehkä arvannut, voit käyttää mitä tahansa kulmaa haluat. Minun käyttö 270 ja 90 degress on, koska aihe käsillä on kääntää sitä niin, että sen pituus on nyt korkeus ja päinvastoin.

Jos kuitenkin vain käytät yllä olevaa koodia, huomaat ongelman nopeasti. Kuva pyörii arounda piste sen keskustassa (”center” Jos käytät adifferentvariant Englanti). Tämä tarkoittaa, että pyöritetty kuva menee päällekkäin sen ylä-ja alapuolella olevan Sisällön kanssa.

tässä vaiheessa tulee varmaan mieleen, että ” Hmm. Se on helppo ratkaista. Laitan kuvan vain omaansa DIV-lohkoon, jossa on kiinteä korkeus, joka antaa tarpeeksi tilaa pyöräytetylle kuvalle.”

joten, kuvan leveys on (sano) 202 pikseliä ja korkeus 42 pikseliä, HTML näyttää something like this:

<div><img src=”../ img / logo202x42.png ” >< / div>

ja CSS, jolla DIV-lohkolle saadaan tarvittava korkeus, on:

#demo_container { height: 202px;}
#demo_kuva { transform: rotate (270deg); }

valitettavasti, jos käytät koodia-on, huomaat, että vaikka säiliö on vaadittu korkeus, pyöritetty Kuva on edelleen päällekkäinen kohdan yläpuolella jättäen iso aukko alla, koska se kääntyy sen keskellä, mutta pysyy pääosin missä se oli.

temppu on säätää sen alkuperäistä asentoa ennen sen pyörittämistä niin, että lopullinen lähtö on oikeassa paikassa. Varmistaaksemme, että pyörivä tulos ei kata mitään yllä olevaa tekstiä, vaan sijaitsee neliömäisesti sille osoitetussa DIV-lohkossa, meidän täytyy siirtää sitä etäisyys, joka on (width - height)/2alaspäin (missä ”/” edustaa jakomerkkiä). Voit helposti suorittaa tämän laskennan manuaalisesti ja laittaa tulokset CSS: ään, tai jos haluat jättää tietueen siitä,miten sait lopullisen numeron, anna selaimen tehdä laskenta puolestasi, jossa on ”calc((202px - 42px)/2)”. Sinun on tietenkin muutettava numerot kuvaasi sopiviksi. Käytän calc() – toimintoa tässä opetusohjelmassa, jotta on selkeämpää, miten päädyin tulokseen.

ylimmän paikan vaihtaminen voidaan tehdä millä tahansa tavalla, esimerkiksi margin-top – säännöllä, tai jos haluat jatkaa tranform-funktioiden käyttöä, translateY().

seuraavassa esimerkissä margin-top:

#demo_kuva {
Marginal-top: calc((202px – 42px)/2) ;
transform: rotate(270deg);
}

alla oleva koodi käyttää muunnostoimintoa:

#demo_kuva {
transform: translateY(calc((202px – 42px)/2)) rotate(270deg);
}

jos haluat käyttää translateY(), varmista, että käännös tehdään ennen therotaatiota, koska leikkausjärjestys on merkittävä.

logo thesitewizard.com

yllä olevassa demokuvassa sen yläasentoa säädettiin margin-top: llä ja käännettiin käyttäen aiemmin kuvattua koodia. Mutta kuten sanoin, voit käyttää mitä tahansa CSS paikannus menetelmä haluat.

kuinka pyörittää kuvaa vain, kun sitä katsotaan matkapuhelimella tai pienellä näytöllä

tässä vaiheessa tulee todennäköisesti mieleen, että pyörityksen suorittaminen vain silloin, kun kuvaa katsotaan pienruutuisella laitteella kuten matkapuhelimella, riittää, että säännöt sijoitetaan kyseisen laitteen kohtaan @media.

se on totta. Tiettyyn pisteeseen. Jos teet sen ryhtymättä mihinkään lisätoimiin, voit todennäköisesti havaita vielä yhden ongelman. Mobiiliystävällisissä tyylilevyissä on tyypillisesti seuraavanlaiset säännöt:

img { max-width: 100% ; }

tämä sääntö kokoaa suuret kuvat niin, että ne mahtuvat pienille näytöille. Tämä on oikea lähestymistapa, paitsi silloin, kun et itse halua kuvan kokoa, vaan pyöritetään. Yllä olevalla vilttisäännöllä selain muuttaa kuvan kokoa ennen kääntämistä, mikä ei ole se, mitä haluat täällä. Se myös poistaa margin-top (tai translateY tai mikä tahansa) laskelmat, koska kuvalla ei ole enää alkuperäisiä mittojaan.

tämän korjaamiseksi lisätään ”#demo_picture” – sääntöihin ”max-width: none;”.

tätä silmällä pitäen tyylilakanaan voi lisätä kaikki tähän mennessä kertyneet säännöt.

Oletetaan, että olet luonut sivusi ohjatun palvelunohjauksen tuottaman mallin pohjalta, ja valitsit 629 pikseliä pisteeksi, jossa se siirtyy yhden sarakkeen tilaan mobiililaitteille phones.In tällöin lisätään säännöt heti” @media ”- rivin jälkeen”styles.css ” – tiedostoon.

@media only screen and (max-width: 629px) {
#demo_kuva {
max-width: none ;
margin-top: calc((202px – 42px)/2) ;
transform: rotate(270deg);
}
Div#tswsidecol {
float: none;
width: 100% ;
}
… ja niin edelleen…

jos et ole käyttänyt ohjattua asettelua, etkä ole myöskään varma, miten luoda oma @media-osiosi pienille näyttölaitteille, lue miten voit tehdä mobiiliystävällisen verkkosivuston: Responsive Design CSS: ssä ensin. Älä kopioi sokeasti yllä olevaa koodia.

huomaa, että sivu on testattava puhelimella (tai työpöydän selainikkunan kokoa on muutettu jäljittelemään).Kuvan leveydestä ja korkeudesta riippuen tulokset voivat olla vähäisempiä. Jos Kuva on esimerkiksi Iso, saattaa lopullinen ulostulo osittaistua kännykän oikealle puolelle. Jos näin on, aseta kuvalle ”margin-left” sopiva numero sen siirtämiseksi vasemmalle. (Vihje: Käytä negatiivisia numeroitamargin-left siirtääksesi kuvaa vasemmalle sen alkuperäisten rajojen ulkopuolelle.)

Selainyhteensopivuus

muunnostoiminnot ovat käytettävissä kaikissa moderneissa selaimissa. Jos vierailijasi käyttävät Internet Exploreria (joka on nyt vanhentunut), he tarvitsevat vähintään version 9.

Copyright © 2020 Christopher Heng. Kaikki oikeudet pidätetään.
Hanki lisää tämän kaltaisia ilmaisia vinkkejä ja artikkeleita web-suunnittelusta,promootiosta, tuloista ja käsikirjoituksesta, alkaen https://www.thesitewizard.com/.

onko tämä artikkeli mielestäsi hyödyllinen? Voit oppia uusia artikkeleita ja skriptejä, jotka on julkaistu thesitewizard.comby Tilaa RSS-syötteen. Yksinkertaisesti kohta RSS-syötteen lukija tai selain, joka tukee RSS-syötteitähttps://www.thesitewizard.com/thesitewizard.xml.Voit lukea lisää siitä, miten tilata toRSS sivuston syötteet minun RSS FAQ.

Please Do not Reprint This Article

This article is copyrighted. Älkää jäljentäkö tai jakelko tätä artikkelia kokonaan tai osittain missään muodossa.

  • kuinka venyttää taustakuvaa täyttääkseen koko Verkkosivuston (tai sen sarakkeen) (HTML/CSS)
  • kuinka keskittää DIV-lohko CSS: llä
  • miten keskittää Kuva CSS: llä
  • miten luoda suorakulmainen laatikko, jossa on Teksti/Kuvat CSS: llä
  • miten luoda pyöristetyt kulmat box borders in CSS
  • how to add a tooltip in html/css (no JavaScript needed)
  • how to register your own domain name
  • can you register a domain name directly with ICANN instead through a middleman?

uudet artikkelit

  • miten antaa taulukon eri Värisille riveille (HTML/CSS)
  • miten luoda ilmainen salataan SSL-varmenne omalla (Windows) tietokoneellasi
  • miten lisätä Meta-tageja Web-sivulle, jossa on BlueGriffon
  • miten pelata kappale (tai jokin muu äänileike) verkkosivun listalta
  • Kuinka piirtää vaakasuora viiva Web-sivulle, jossa on lauseke Web
  • miten luoda verkkosivusto ilmaiseksi
  • Miksi en voi tehdä mitään verkkotunnusta, jonka haluan? Onko mitään keinoa päästä eroon rekisterinpitäjästä kokonaan?
  • Mitä eroa on verkkotunnuksen rekisterinpitäjällä ja Web-isännällä?
  • miten tehdä mobiiliystävällinen Verkkosivusto: reagoiva suunnittelu CSS: ssä
  • Mitä eroa on sisällönhallintajärjestelmällä (CMS), blogilla, Web-Editorilla ja online-sivuston rakentajalla?

Popular Articles

  • How to Create a Blog
  • How to Make / Create a Website: the Beginner ’ s A-Z Guide
  • Tips on Choosing a Good Domain Name
  • Expression Web Tutorial: Miten suunnitella Verkkosivusto Microsoft Expression Web
  • Dreamweaver Tutorial: Miten suunnitella Verkkosivusto Dreamweaver CS6
  • BlueGriffon Tutorial: Miten suunnitella Verkkosivusto BlueGriffon 3
  • miten suunnitella ja julkaista Website KompoZer (free WYSIWYG web editor)
  • Free Feedback/Contact Form Wizard

miten linkittää tälle sivulle

se näkyy omalla sivulla seuraavasti:

miten kiertää kuva verkkosivulla, kun sitä katsotaan matkapuhelimella (CSS)

Vastaa

Sähköpostiosoitettasi ei julkaista.