• Articles
• admin

Krzysztof Heng, thesitewizard.com

gość zapytał mnie, jak może obrócić zdjęcie tak, aby było wyświetlane pionowo, gdy ktoś ogląda jego stronę na telefonie komórkowym. Oznacza to, że chciał, aby obraz był wyświetlany w jego zwykłej orientacji, z dłuższą stroną poziomą, na komputerze stacjonarnym lub laptopie, ale obracany na telefonie, więc jego dłuższa strona jest teraz pionowa.

• Ten artykuł dotyczy obrazu, który musi być wyświetlany inaczej na monitorach komputerowychi telefonach komórkowych. Jeśli po prostu chcesz obrócić obraz na stałe, aby zawsze znajdował się w tej pozycji, niezależnie od tego, jak jest oglądany, powinieneś po prostu użyć edycji animage, aby to zrobić. Jest to o wiele prostsze i bardziej wydajne, i pozwala uniknąć problemów, które pojawiają się, gdy masz CSS do obrotu dla Ciebie.

• alternatywą dla obracania obrazu jest zmniejszenie go, aby dopasować go do szerokości ekranu telefonu komórkowego. Większość stron internetowych robi to w ten sposób. Jeśli wolisz, przeczytaj, Jak sprawić, aby Twoje obrazy były przyjazne dla urządzeń mobilnych (responsywny projekt). Mam również artykuł, który pokazuje, jak skracać obrazy na stronie internetowej, gdy są oglądane na telefonie komórkowym.

• mój odwiedzający miał stronę internetową, która korzystała z układu kolumnowego 2 wygenerowanego przez kreator mobilny-FriendlyLayout, ale możesz również skorzystać z technik opisanych poniżej na stronie zaprojektowanej przy użyciu dowolnego układu, stworzonego samodzielnie lub uzyskanego z innego miejsca. Oznacza to, że metoda jest ogólna, którą można użyćzależnie od tego, jak zaprojektowałeś witrynę.

• oczywiście ten artykuł zakłada, że masz już stronę internetową. Jeśli nie, zacznij od poradnika Jak stworzyć stronę internetową.Zawsze możesz wrócić do tego artykułu, aby dopracować rzeczy po wykonaniu podstawowego projektu.

jak obrócić obraz w CSS

powiedzmy, że masz obraz o id „demo_picture”. Aby go obrócić, użyj następującego CSS.

jeśli to obróci Twoje zdjęcie w złym kierunku, użyj rotate(90deg) zamiast tego. Jak można się domyślić, można użyć dowolnego kąta chcesz. Moje użycie 270 i 90 stopni jest ponieważ tematem pod ręką jest obrócenie go tak, aby jego długość była teraz wysokością i odwrotnie.

jednak, jeśli po prostu użyjesz powyższego kodu, szybko zauważysz problem. Obraz obraca się wokół punktu w jego centrum („center”, jeśli używasz zmiennego języka angielskiego). Oznacza to, że obrócony obraz nałoży się na zawartość powyżej i poniżej.

w tym momencie pewnie pomyślisz: Łatwo to rozwiązać. Po prostu umieszczę zdjęcie w bloku DIV o stałej wysokości, który daje wystarczająco dużo miejsca na obracany obraz.”

tak, dla obrazu ma szerokość (powiedzmy) 202 pikseli i wysokość 42 pikseli, HTML będzie wyglądać jak to:

i CSS do nadania blokowi DIV wymaganej wysokości to:

niestety, jeśli użyjesz kodu w stanie, w jakim jest, okaże się,że podczas gdy kontener ma wymaganą wysokość, obrócony obraz nadal będzie pokrywał się z akapitem nad nim, pozostawiając dużą lukę poniżej, ponieważ obraca się on na jego środku, pozostając zasadniczo tam, gdzie był.

sztuczka polega na ustawieniu jego pierwotnej pozycji przed obróceniem, tak aby ostateczne wyjście było we właściwym miejscu. Aby upewnić się, że obrócony wynik nie obejmuje żadnego tekstu powyżej, ale leży prosto w przydzielonym dla niego bloku DIV, musimy przesunąć go o odległość równą (width - height)/2w dół (gdzie „/” oznacza znak podziału). Możesz łatwo wykonać te obliczenia ręcznie i umieścić wyniki w CSS, lub,jeśli chcesz zostawić zapis, w jaki sposób uzyskałeś ostateczną liczbę, pozwól przeglądarce wykonać obliczenia za ciebie, za pomocą „calc((202px - 42px)/2)„. Oczywiście będziesz musiał zmienić liczby na odpowiednie dla Twojego obrazu. Użyję funkcji calc() w tym samouczku, aby było jaśniej, w jaki sposób dotarłem do wyniku.

Zmiana górnej pozycji może być wykonana na wiele sposobów, na przykład za pomocą reguły margin-top lub jeśli wolisz nadal korzystać z funkcji tranform, za pomocą translateY().

poniższy przykład wykorzystuje margin-top:

poniższy kod wykorzystuje funkcję transform:

jeśli zdecydujesz się użyć translateY(), upewnij się, że tłumaczenie zostało wykonane przed wykonaniem tłumaczenia, ponieważ kolejność operacji jest znacząca.

powyższy obrazek demonstracyjny miał swoją górną pozycję skorygowaną o margin-top i obrócony, używając wcześniej opisanego kodu. Ale jak powiedziałem, możesz użyć dowolnej metody pozycjonowania CSS, którą chcesz.

jak obrócić obraz tylko wtedy, gdy jest wyświetlany na telefonie komórkowym lub małym ekranie

w tym momencie prawdopodobnie pomyślisz, że aby wykonać obrót tylko wtedy, gdy obraz jest wyświetlany na małym urządzeniu, takim jak telefon komórkowy, wystarczy umieścić reguły w sekcji @media dla tego urządzenia.

to prawda. Do pewnego stopnia. Jeśli zrobisz to bez podejmowania dalszych działań, prawdopodobnie będziesz miał jeszcze jeden problem. Przyjazne dla urządzeń mobilnych arkusze stylów mają zazwyczaj następujące reguły:

ta reguła zmienia rozmiar dużych zdjęć tak, aby zmieściły się na małych ekranach. Jest to właściwe podejście, z wyjątkiem sytuacji, gdy nie chcesz, aby obraz był zmieniany, ale obracany. Dzięki powyższej zasadzie, obraz jest zmieniany przez przeglądarkę przed obróceniem, co nie jest tym, czego chcesz. Zostanie on również usunięty z Twoich obliczeń margin-top (lub translateY lub cokolwiek innego), ponieważ obraz nie będzie już miał swoich pierwotnych wymiarów.

aby to naprawić, dodaj „max-width: none;” do zasad „#demo_picture„.

Mając to na uwadze, możemy dodać wszystkie reguły, które zgromadziliśmy do tej pory do arkusza stylów.

Załóżmy, że stworzyłeś swoją stronę na podstawie szablonu wygenerowanego przez kreatora i wybrałeś 629 pikseli jako punkt, w którym przełącza się na tryb Jednokolumnowy dla urządzeń mobilnych phones.In w takim przypadku Wstaw reguły tuż po linii” @media„w pliku”styles.css„.

jeśli nie korzystałeś z Kreatora układu, a także nie wiesz, jak stworzyć własną sekcję @media dla urządzeń z małym ekranem, przeczytaj, jak stworzyć stronę przyjazną dla urządzeń mobilnych: responsywny projekt w CSS. Nie kopiuj ślepo powyższego kodu.

zauważ, że będziesz musiał przetestować stronę na telefonie (lub w oknie przeglądarki na pulpicie zmienionym w celu naśladowania).W zależności od szerokości i wysokości obrazu, wyniki mogą być mniej zadowalające. Na przykład, jeśli obraz jest duży, może się okazać, że końcowe wyjście zostanie częściowo skopiowane po prawej stronie telefonu komórkowego. Jeśli tak, ustaw” margin-left ” na swoim obrazku z odpowiednią liczbą, aby przesunąć go w lewo. (Wskazówka:Użyj liczb ujemnych w margin-left, aby przesunąć obraz w lewo poza jego pierwotne granice.)

zgodność z przeglądarką

funkcje transformacji są dostępne we wszystkich nowoczesnych przeglądarkach. Jeśli odwiedzający korzystają z przeglądarki Internet Explorer (która jest już przestarzała), będą potrzebować co najmniej wersji 9.

Prawa Autorskie © 2019 Christopher Heng. Wszelkie prawa zastrzeżone.
Uzyskaj więcej darmowych porad i artykułów takich jak ten, na temat projektowania stron internetowych, promocji, przychodów i skryptów, od https://www.thesitewizard.com/.

czy uważasz, że ten artykuł jest przydatny? Możesz dowiedzieć się o nowych artykułach i skryptach, które są publikowane na stronie internetowej.comby subskrybuje kanał RSS. Po prostu skieruj swój czytnik kanałów RSS lub przeglądarkę obsługującą kanały RSS na https://www.thesitewizard.com/ thesitewizard.xml.Możesz przeczytać więcej o tym, jak subskrybować kanały toRSS z mojego RSS FAQ.

proszę nie Przedrukowywać tego artykułu

ten artykuł jest chroniony prawami autorskimi. Proszę nie powielać lub rozpowszechniać tego artykułu w całości lub w części, w jakiejkolwiek formie.

• jak rozciągnąć obraz tła, aby wypełnić całą witrynę (lub jej kolumnę) (HTML/CSS)
• jak wyśrodkować blok DIV za pomocą CSS
• jak wyśrodkować obraz za pomocą CSS
• Jak utworzyć prostokątne pudełko zawierające tekst/zdjęcia za pomocą CSS
• Jak utworzyć zaokrąglone rogi dla swojego ramki w CSS
• Jak dodać podpowiedź w HTML/CSS (bez JavaScript)
• jak zarejestrować własną nazwę domeny
• czy możesz zarejestrować nazwę domeny bezpośrednio w ICANN zamiast przez pośrednika?

nowe artykuły

• jak nadać alternatywnym wierszom tabeli inny kolor (HTML/CSS)
• jak wygenerować darmowy certyfikat Let ’ s Encrypt SSL na własnym komputerze (Windows)
• Jak wstawić metatagi do strony internetowej za pomocą BlueGriffon
• Jak grać w piosenka (lub inny klip audio) z listy na stronie internetowej
• Jak narysować poziomą linię na stronie internetowej z wyrażeniem Web
• jak stworzyć stronę internetową za darmo
• dlaczego nie mogę stworzyć dowolnej domeny? Czy istnieje sposób, aby pozbyć się rejestratora całkowicie?
• Jaka jest różnica między rejestratorem nazwy domeny a hostem internetowym?
• Jak stworzyć stronę przyjazną dla urządzeń mobilnych: responsywny projekt w CSS
• jaka jest różnica między Systemem Zarządzania Treścią (CMS), blogiem, edytorem stron internetowych i kreatorem stron internetowych?

popularne artykuły

• Jak stworzyć bloga
• Jak stworzyć / stworzyć stronę internetową: Przewodnik od A do Z dla początkujących
• Wskazówki dotyczące wyboru dobrej nazwy domeny
• Expression Web Tutorial: Jak zaprojektować stronę internetową za pomocą Microsoft Expression Web
• Dreamweaver Tutorial: Jak zaprojektować stronę internetową za pomocą Dreamweaver CS6
• BlueGriffon Tutorial: Jak zaprojektować stronę internetową za pomocą BlueGriffon 3
• jak zaprojektować i opublikować swoją stronę internetową za pomocą KompoZer (darmowego edytora WYSIWYG)
• darmowy kreator opinii/formularzy kontaktowych

Jak link do tej strony

pojawi się na twojej stronie jako:

jak obrócić obraz na stronie internetowej, gdy jest wyświetlany na telefonie komórkowym (CSS)