• Articles
• admin

Christopher Heng, thesitewizard.com

egy látogató megkérdezte tőlem, hogyan tudna egy képet úgy fordítani, hogy függőlegesen jelenjen meg, amikor valaki mobiltelefonon nézte meg a weboldalát. Vagyis azt akarta, hogy a kép a szokásos módon jelenjen megorientáció, a hosszabb oldal vízszintes, asztali vagy hordozható számítógépen, de elforgatva egy telefonon, így a hosszabb oldal most függőleges.

Preambulum

• ez a cikk egy olyan képpel foglalkozik, amelyet másképp kell megjeleníteni a számítógépes monitorokonés mobiltelefonok. Ha egyszerűen csak véglegesen el akarja forgatni a képet, hogy mindig abban a helyzetben legyen, függetlenül attól, hogy hogyan nézik meg, akkor csak használja animage szerkesztőhogy csináld. Sokkal egyszerűbb és hatékonyabb, és elkerüli azokat a problémákat, amelyek akkor merülnek fel, amikor CSS-t kap a rotációhoz.

• a kép elforgatásának alternatívája az, ha összezsugorítja, hogy illeszkedjen a mobiltelefon képernyőjének szélességéhez. A legtöbb weboldal így csinálja. Ha úgy tetszik, hogy, kérjük readHowto, hogy a képek mobil-barát (reszponzív Design) helyett. Van egy cikkem is, amely bemutatjaa Képek elrejtése egy weboldalon, amikor mobiltelefonon nézik meg.

• a látogatómnak volt egy weboldala, amely a mobilbarát elrendezés varázsló által generált 2 oszlop elrendezést használta, de az alábbiakban leírt technikákat is használhatja egy olyan weboldalon, amelyet bármilyen elrendezés felhasználásával terveztek, saját maga készítette vagy máshonnan szerezte be. Vagyis a módszer általános, amely használhatófüggetlenül attól, hogy hogyan tervezte meg a webhelyet.

• nyilvánvaló, hogy ez a cikk feltételezi, hogy már van weboldala. Ha nem, kérjük, kezdje az útmutatóvalhogyan hozhat létre weboldalt.Mindig visszatérhet ehhez a cikkhez, hogy finomítsa a dolgokat, miután elkészítette az alapvető tervet.

Kép elforgatása CSS-ben

tegyük fel, hogy van egy képe a “demo_picture”azonosítóval. A forgatáshoz használja a következő CSS-t.

ha ez rossz irányba forgatja a képet, használja a rotate(90deg) lehetőséget. Ahogy talántalán kitalálta, bármilyen szöget használhat. A 270-es és a 90-es fokozatot azért használom, mertaz aktuális téma az, hogy elfordítsuk úgy, hogy a hossza most a magasság legyen, és fordítva.

ha azonban egyszerűen a fenti kódot használja, gyorsan észrevesz egy problémát. A kép forog arounda pont a közepén (“center”, ha használja adifferentvariant angol). Ez azt jelenti, hogy az elforgatott kép átfedi a fölötte és alatt lévő tartalmat.

ezen a ponton valószínűleg azt gondolja: “Hmm. Ezt könnyű megoldani. Csak beteszem a képetsaját DIV blokk rögzített magassággal, amely elegendő helyet biztosít az elforgatott kép számára.”

tehát, ha egy kép szélessége (mondjuk) 202 Pixel, magassága pedig 42 pixel, a HTML valahogy így fog kinézni:

és a CSS, hogy a DIV blokk a szükséges magasság:

Sajnálatos módon, ha a kódot úgy használja, ahogy van,azt fogja tapasztalni, hogy míg a konténer rendelkezik a szükséges magassággal, az elforgatott kép továbbra is átfedi a fölötte lévő bekezdést, miközben nagy rést hagy alatta, sinceit elfordul a közepén, miközben lényegében ott marad, ahol volt.

a trükk az, hogy a forgatás előtt állítsa be az eredeti helyzetét, hogy a végső kimenet a megfelelő helyen legyen. Annak biztosítása érdekében, hogy az elforgatott eredmény nem terjed ki a fenti szövegre, hanem négyzetben fekszika hozzá rendelt DIV blokkban (width - height)/2 – nek megfelelő távolságot kell mozgatnunk lefelé (ahol a “/” az osztásjelet jelenti). Könnyen elvégezheti ezt a számítást manuálisan ésaz eredményeket a CSS-be, vagy ha rekordot szeretne hagyni arról, hogyan szerezte meg a végső számot,hagyja, hogy a böngésző elvégezze a számítást az Ön számára, “calc((202px - 42px)/2)“. Természetesen meg kell változtatnia a számokat a képének megfelelő számokra. A calc() funkciót fogom használni ebben az oktatóanyagban, hogy világosabb legyen, hogyan jutottam el az eredményhez.

a felső pozíció megváltoztatása tetszőleges számú módon történhet, például egy margin-topszabállyal, vagy ha továbbra is használni szeretné a tranform függvényeket,akkor translateY().

a következő példa használja margin-top:

az alábbi kód transzformációs függvényt használ:

ha a translateY() használatát választja, ellenőrizze, hogy a fordítás megtörtént-e aforgatás, mivel a műveletek sorrendje jelentős.

a fenti demó kép felső pozícióját margin-top – vel állítottuk be, majd a korábban leírt pontos kód használatával elforgattuk. De mint mondtam, bármilyen CSS pozicionálási módszert használhat.

hogyan kell elforgatni a képet csak mobiltelefonon vagy kis képernyőn nézve

ezen a ponton valószínűleg azt gondolja, hogy a forgatáshoz csak akkor, ha a képet egy kisképernyős eszközön, például mobiltelefonon nézi, csak annyit kell tennie, hogy a szabályokat az eszköz @media szakaszába helyezi.

ez igaz. Egy pontig. Ha minden további intézkedés nélkül megteszi, akkor valószínűleg még egy problémával szembesül. A mobilbarát stíluslapok általában a következő szabályokkal rendelkeznek:

ez a szabály átméretezi a nagy képeket, hogy azok elférjenek a kis képernyőkön. Ez a helyes megközelítés, kivéve, ha valójában nem a kép átméretezését, hanem elforgatását szeretné. A fenti általános szabály szerint a képet a böngésző átméretezi, mielőtt elforgatná, amit itt nem akar. A margin-top (vagy translateY vagy bármi más) számításokat is eldobja, mivel a kép már nem lesz eredeti mérete.

ennek kijavításához adja hozzá a “max-width: none;” szót a “#demo_picture ” szabályokhoz.

ezt szem előtt tartva hozzáadhatjuk az összes eddig felhalmozott szabályt a stíluslaphoz.

tegyük fel, hogy az oldalt az elrendezés varázsló által generált sablon alapján hozta létre, és 629 pixelt választott pontként, ahol az egyoszlopos módra vált mobilra phones.In ilyen esetben illessze be a szabályokat közvetlenül a “@media” sor után a”styles.css” fájlba.

ha nem használta az elrendezés varázslót, és nem is tudja, hogyan hozhat létre saját @media szekciótkis képernyős eszközök esetében olvassa el, hogyan készítsen mobilbarát weboldalt: először reszponzív tervezés CSS-ben. Ne vakon másolja a fenti kódot.

vegye figyelembe, hogy az oldalt telefonon kell tesztelnie (vagy egy asztali böngészőablakot átméretezni, hogy utánozza).A kép szélességétől és magasságától függően előfordulhat, hogy az eredmények kisebbek, mintörömmel. Például, ha a kép nagy, előfordulhat, hogy a végső kimenet részbencsípve a mobiltelefon jobb oldalán. Ha igen, állítsa be a “margin-left ” értéketa megfelelő számmal ellátott képet balra mozgathatja. (Tipp: Használja a negatív számokatmargin-left – ben, hogy a képet balra mozgassa az eredeti határain túl.)

Böngésző kompatibilitás

a transzformációs funkciók minden modern böngészőben elérhetők. Ha a látogatók az Internet Explorert használják (ami már elavult), akkor legalább a 9-es verzióra lesz szükségük.

Copyright 6020. Minden jog fenntartva.
további ingyenes tippeket és cikkeket kaphat a webdesignról, a promócióról, a bevételekről és a szkriptekről a https://www.thesitewizard.com/ – tól.

hasznosnak találja ezt a cikket? Meg lehet tanulni az új cikkek és szkriptek, amelyek közzé onthesitewizard.comby feliratkozik az RSS feed. Egyszerűen pont az RSS feed olvasó, vagy egy böngésző, amely támogatja az RSS feedshttps://www.thesitewizard.com/ thesitewizard.xml.Elolvashatja többet arról, hogyan kell feliratkozni toRSS webhely hírcsatornák én RSS GYIK.

kérjük, ne nyomtassa ki újra ezt a cikket

ez a cikk szerzői jogvédelem alatt áll. Kérjük, ne reprodukálja vagy terjessze ezt a cikket részben vagy egészben, bármilyen formában.

• hogyan nyújtsunk háttérképet a teljes weboldal (vagy annak egy oszlopa) kitöltéséhez (HTML/CSS)
• Hogyan állítsunk egy DIV blokkot a CSS használatával
• Hogyan állítsunk egy képet a CSS segítségével?
• Hogyan hozzunk létre egy téglalap alakú dobozt a szöveg/képek CSS-sel való tárolására?
• Hogyan hozzunk létre lekerekített sarkokat a CSS-sel rendelkező szöveg/kép számára box határok a CSS-ben
• eszköztipp hozzáadása HTML / CSS-ben (nincs szükség JavaScript-re)
• hogyan regisztrálhatja saját domain nevét
• regisztrálhat-e egy domain nevet közvetlenül az ICANN-nál, nem pedig közvetítőn keresztül?

új cikkek

• Hogyan adhatunk egy táblázat alternatív sorainak más színt (HTML/CSS)
• hogyan lehet létrehozni az ingyenes Let ‘ s Encrypt SSL tanúsítványt a saját (Windows) számítógépen
• hogyan lehet metacímkéket beilleszteni egy weboldalba a BlueGriffon segítségével
• hogyan kell játszani egy dal (vagy más hangklip) egy weboldalon található listáról
• Hogyan rajzoljunk vízszintes vonalat egy kifejezéssel ellátott weboldalon web
• hogyan hozzunk létre ingyenes weboldalt
• miért nem tudok létrehozni egy kívánt domaint? Van-e mód arra, hogy teljesen megszüntesse az Anyakönyvvezetőt?
• mi a különbség a Domain név regisztrátor és a Web Host között?
• Hogyan készítsünk mobilbarát weboldalt: reszponzív tervezés CSS-ben
• mi a különbség a tartalomkezelő rendszer (CMS), a Blog, a webszerkesztő és az Online webhely-készítő között?

Népszerű cikkek

• Hogyan hozzunk létre egy Blog
• Hogyan készítsünk / hozzon létre egy honlapot: A kezdő A-Z útmutató
• Tippek választott egy jó Domain név
• Expression Web Tutorial: Hogyan tervezzünk egy honlapot a Microsoft Expression Web
• Dreamweaver bemutató: Hogyan tervezzünk egy honlapot Dreamweaver CS6
• BlueGriffon bemutató: Hogyan tervezzünk egy honlapot BlueGriffon 3
• hogyan tervezzük és tegye közzé a honlapon KompoZer (free WYSIWYG web editor)
• ingyenes visszajelzés/Kapcsolatfelvételi űrlap varázsló

hogyan lehet linkelni erre az oldalra

az oldalon a következőképpen jelenik meg:

hogyan lehet elforgatni egy képet egy weboldalon, amikor mobiltelefonon (CSS) nézik meg