• Articles
• admin

Christopher Heng, thesitewizard.com

návštěvník se mě zeptal, jak by mohl otočit obrázek tak, aby byl zobrazen vertikálněkdyž někdo prohlížel jeho webovou stránku na mobilním telefonu. To znamená, že chtěl, aby se obraz zobrazoval ve své obvyklé orientaci, s delší stranou vodorovnou, na stolním nebo přenosném počítači, ale otáčel se na telefonu, takže jeho delší strana je nyní svislá.

Preambule

• tento článek se zabývá obrázkem, který musí být zobrazen odlišně na monitorech počítačů a mobilních telefonech. Pokud chcete jednoduše otočit obrázek natrvalo tak, aby byl vždy v této pozicibez ohledu na to, jak je zobrazen, měli byste použít animage editork tomu. Je to mnohem jednodušší a efektivnější, a vyhýbá se problémům, které vznikají, když se dostanete CSS todo rotaci pro vás.

• alternativou k otáčení obrázku je zmenšení tak, aby odpovídalo šířce obrazovky mobilního telefonu. Většina webových stránek to tak dělá. Pokud dáváte přednost, přečtěte si, aby vaše obrázky byly mobilní (responzivní Design) místo toho. Mám také článek, který ukazujevy jakskrýt obrázky na webových stránkách, když je zobrazen na mobilním telefonu.

• můj návštěvník měl web, který používal rozložení sloupců 2 generované průvodcem mobile-FriendlyLayout, ale můžete také použít níže popsané techniky na webových stránkách navržených pomocí jakéhokoli rozvržení, vytvořeného nebo získaného odjinud. To znamená, že metoda je obecná, kterou lze použítbez ohledu na to, jak jste web navrhli.

• je zřejmé, že tento článek předpokládá, že již máte webové stránky. Pokud ne, začněte s příručkemjak vytvořit web.K tomuto článku se můžete vždy vrátit a doladit věci poté, co provedete základní design.

jak otočit obrázek v CSS

řekněme, že máte obrázek s id „demo_picture“. Chcete-li jej otočit, použijte následující CSS.

pokud to otočí váš obrázek nesprávným směrem, použijte místo toho rotate(90deg). Jak jste možná uhodli, můžete použít libovolný úhel, který se vám líbí. Moje použití 270 a 90 degresů je proto, žetéma, které je po ruce, je otočit tak, aby jeho délka byla nyní výška a naopak.

pokud však jednoduše použijete výše uvedený kód, rychle si všimnete problému. Obrázek se otáčí kolembod v jeho středu („střed“, pokud používáte adifferentvariant angličtiny). To znamená, že otočený obraz překrývá obsah nad a pod ním.

v tomto okamžiku si pravděpodobně pomyslíte: „Hmm. To se snadno řeší. Jen dám obrázek do svého DIV bloku s pevnou výškou, která dává dostatek prostoru pro otočený obrázek.“

takže pro obrázek má šířku (řekněme) 202 pixelů a výšku 42 Pixelů, HTML bude vypadat něco podobného:

a CSS pro získání DIV bloku potřebné výšky je:

bohužel, pokud použijete kód tak, jak je, zjistíte, že zatímco kontejner má požadovanou výšku, otočený obrázek bude stále překrývat odstavec nad ním, zatímco ponechá velkou mezeru níže, protože se otáčí ve svém středu, zatímco zůstane v podstatě tam, kde byl.

trik spočívá v úpravě původní polohy před otáčením tak, aby konečný výstup byl na správném místě. Ujistěte se, že otočený výsledek nezahrnuje žádný text výše, ale leží čtvercev bloku DIV, který je pro něj přidělen, musíme jej posunout o vzdálenost rovnou (width - height)/2dolů (kde „/“ představuje znaménko dělení). Tento výpočet můžete snadno provést ručně a dátvýsledky do CSS nebo, pokud chcete nechat záznam o tom,jak jste získali konečné číslo, nechte prohlížeč provést výpočet za vás pomocí „calc((202px - 42px)/2)„. Budete samozřejmě muset změnit čísla na čísla vhodná pro váš obrázek. Budu používat funkci calc() v tomto tutoriálu, aby bylo jasnější, jak jsem dospěl k výsledku.

Změna horní polohy může být provedena libovolným počtem způsobů, například s pravidlem margin-top, nebo pokud chcete pokračovat v používání funkcí tranform, s translateY().

následující příklad používá margin-top:

níže uvedený kód používá transformační funkci:

pokud se rozhodnete použít translateY(), ujistěte se, že překlad je proveden před therotací, protože pořadí operací je významné.

výše uvedený ukázkový obrázek měl svou horní polohu upravenou pomocí margin-top a otočen pomocí dříve popsaného kódu. Ale jak jsem řekl, můžete použít libovolnou metodu určování polohy CSS, kterou chcete.

jak otočit obrázek pouze při prohlížení na mobilním telefonu nebo malé obrazovce

v tomto okamžiku si pravděpodobně budete myslet, že chcete-li provést rotaci pouze tehdy, když je obrázek zobrazen na zařízení s malou obrazovkou, jako je mobilní telefon, vše, co musíte udělat, je umístit pravidla do sekce @mediapro toto zařízení.

to je pravda. Do jisté míry. Pokud to uděláte, aniž byste podnikli další kroky, pravděpodobně narazíte na další problém. Mobilní styly mají obvykle následující pravidla:

toto pravidlo mění velikost velkých obrázků tak, aby se vešly na malé obrazovky. Toto je správný přístup, s výjimkou případů, kdy ve skutečnosti nechcete, aby byl obrázek změněn, ale otočen. S výše uvedeným pravidlem deka je obrázek změněn prohlížečem před otočením, což zde není to, co chcete. Bude to také vaše výpočty margin-top (nebo translateY nebo cokoli jiného), protože obrázek již nebude mít své původní rozměry.

Chcete-li to opravit, přidejte „max-width: none;“ k pravidlům „#demo_picture„.

s ohledem na to můžeme do stylového listu přidat všechna pravidla, která jsme dosud nashromáždili.

řekněme, že jste svou stránku vytvořili na základě šablony vygenerované wizardem layout a vybrali jste 629 pixelů jako bod, kde se přepne do režimu jednoho sloupce pro mobilní zařízení phones.In v takovém případě vložte pravidla těsně za řádek „@media „do souboru“styles.css„.

pokud jste nepoužili průvodce rozvržením a nejste si jisti, jak vytvořit vlastní sekci @media pro zařízení s malou obrazovkou, přečtěte si, jak vytvořit mobilní web: responzivní Design v CSS jako první. Nekopírujte slepě výše uvedený kód.

Všimněte si, že budete muset otestovat stránku v telefonu (nebo v okně prohlížeče na ploše, aby se napodobila).V závislosti na šířce a výšce obrázku mohou být výsledky menší nežpříjemné. Například, pokud je obrázek velký, můžete najít konečný výstup, který má být částečněsklip na pravé straně mobilního telefonu. Pokud ano, nastavte na obrázku „margin-left “ obrázek s příslušným číslem pro jeho přesunutí doleva. (Tip: Použijte záporná čísla vmargin-left k přesunutí obrazu doleva za jeho původní hranice.)

Kompatibilita prohlížeče

transformační funkce jsou k dispozici ve všech moderních prohlížečích. Pokud vaši návštěvníci používají Internet Explorer (který je nyní zastaralý), budou potřebovat alespoň verzi 9.

Copyright © 2020 Christopher Heng. Všechna práva vyhrazena.
Získejte více bezplatných tipů a článků,jako je tento, o webdesignu, propagaci, příjmech a skriptování, od https://www.thesitewizard.com/.

považujete tento článek za užitečný? Můžete se dozvědět o nových článcích a skriptech, které jsou publikovány onthesitewizard.comby se přihlásil k odběru RSS kanálu. Jednoduše nasměrujte čtečku RSS nebo prohlížeč, který podporuje RSS kanály nahttps://www.thesitewizard.com/thesitewizard.datum.Můžete si přečíst více o tom, jak se přihlásit k odběru torss stránky kanály z mého RSS FAQ.

prosím, netiskněte tento článek

tento článek je chráněn autorskými právy. Prosím, nereprodukujte ani nerozšiřujte tento článek zcela nebo zčásti, v jakékoli formě.

• jak roztáhnout obrázek na pozadí tak, aby vyplnil celý web (nebo jeho sloupec) (HTML/CSS)
• jak vycentrovat DIV blok pomocí CSS
• jak vycentrovat obrázek pomocí CSS
• jak vytvořit obdélníkový rámeček, který bude obsahovat váš Text/obrázky s CSS
• jak vytvořit zaoblené rohy pro ohraničení vašeho boxu v CSS
• jak přidat obrázek tooltip v HTML/CSS (není potřeba JavaScript)
• Jak zaregistrovat své vlastní doménové jméno
• můžete zaregistrovat doménové jméno přímo u ICANN místo prostřednictvím prostředníka?

nové články

• jak dát alternativním řádkům tabulky jinou barvu (HTML/CSS)
• jak vygenerovat bezplatný certifikát Let ‚ s Encrypt SSL na vašem vlastním (Windows) počítači
• jak vložit Meta Tagy do webové stránky s BlueGriffon
• jak přehrát skladbu (nebo nějaký jiný zvukový klip) ze seznamu na webu
• jak nakreslit vodorovnou čáru na webové stránce s výrazem Web
• jak vytvořit web zdarma
• Proč nemohu vytvořit libovolnou doménu, kterou chci? Existuje způsob, jak se zbavit registrátora úplně?
• jaký je rozdíl mezi registrátorem doménových jmen a webhostingem?
• jak vytvořit web vhodný pro mobilní zařízení: responzivní Design v CSS
• jaký je rozdíl mezi systémem pro správu obsahu (CMS), blogem, webovým editorem a online tvůrcem stránek?

populární články

• jak vytvořit Blog
• jak vytvořit / vytvořit web: průvodce A-Z pro začátečníky
• tipy na výběr dobrého názvu domény
• Expression Web Tutorial: Jak navrhnout webové stránky s Microsoft Expression Web
• Dreamweaver Tutorial: Jak navrhnout webové stránky s Dreamweaver CS6
• BlueGriffon Tutorial: Jak navrhnout webové stránky s BlueGriffon 3
• jak navrhnout a publikovat své webové stránky s KompoZer (free WYSIWYG web editor)
• zdarma zpětná vazba/kontaktní formulář průvodce

Jak odkaz na tuto stránku

na vaší stránce se zobrazí jako:

jak otočit obrázek na webu při prohlížení na mobilním telefonu (CSS)