• Articles
• admin

door Christopher Heng, thesitewizard.com

Een bezoeker vroeg mij hoe hij zou kunnen zijn beurt een foto, zodat het wordt weergegeven verticallywhen iemand gezien zijn web pagina op een mobiele telefoon. Dat wil zeggen, hij wilde dat de foto worden getoond in zijn usualoriëntatie, met de langere kant horizontaal, op een desktop of laptop computer, maar gedraaid op een telefoon, dus hetlangere kant is nu verticaal.

preambule

• dit artikel gaat over een foto die anders moet worden weergegeven op computermonitors en mobiele telefoons. Als u gewoon wilt een afbeelding permanent te roteren, zodat het altijd in die positie isgeregardless van hoe het wordt bekeken, moet je gewoon gebruik maken van animage editorto doen. Het is veel eenvoudiger en efficiënter, en het vermijdt de problemen die zich voordoen als je CSS om de rotatie voor je te doen.

• een alternatief voor het roteren van een foto is om het te verkleinen om de breedte van een scherm van een mobiele telefoon te passen. De meeste websites doen het zo. Als je dat liever hebt, lees dan hoe je afbeeldingen mobielvriendelijk (Responsive Design) kunt maken. Ik heb ook een artikel dat je laat zien hoe je beelden op een website te verbergen wanneer het wordt bekeken op een mobiele telefoon.

• mijn bezoeker had een website die de 2 kolom lay-out gegenereerd door de mobile-FriendlyLayout Wizard gebruikt, maar je kunt ook de technieken hieronder beschreven op een website ontworpen met behulp van elke lay-out, zelf gemaakt of verkregen van elders. Dat wil zeggen, de methode is een algemene die kan worden gebruiktregardless van hoe u de site ontworpen.

• uiteraard veronderstelt dit artikel dat u al een website hebt. Zo niet, begin dan met de handleiding over het maken van een Website.U kunt altijd terugkeren naar dit artikel om dingen te verfijnen nadat u het basisontwerp hebt gedaan.

hoe een afbeelding in CSS

te roteren stel dat je een afbeelding hebt met een id van “demo_picture”. Om het te roteren, gebruik je de volgende CSS.

als dit uw afbeelding in de verkeerde richting draait, gebruik dan rotate(90deg). Zoals je misschien al geraden, kunt u elke hoek die u wilt gebruiken. Mijn gebruik van 270 en 90 graden is omdat het onderwerp bij de hand is om het zo te draaien dat de lengte is nu de hoogte en vice versa.

echter, als u gewoon de bovenstaande code gebruikt, zult u snel een probleem opmerken. Het beeld draait rond een punt in het midden (“Midden” als je eenverschillende variant van het Engels gebruikt). Dit betekent dat de geroteerde afbeelding de inhoud erboven en eronder overlapt.

op dit punt zult u waarschijnlijk denken, ” Hmm. Dat is makkelijk op te lossen. Ik zet de foto in zijn eigen DIV blok met een vaste hoogte die genoeg ruimte geeft voor de geroteerde foto.”

dus, voor een afbeelding heeft een breedte van (Laten we zeggen) 202 pixels en een hoogte van 42 pixels, zal de HTML er ongeveer zo uitzien:

En de CSS te geven van het DIV-blok voor de nodige hoogte is:

Helaas, als u de code is zoals het is, u vindt dat terwijl de container is voorzien van de vereiste hoogte,de geroteerde afbeelding zal nog steeds overlappen de alinea erboven en laat een groot gat onderaan, sinceit prikkels op het centrum, terwijl de resterende wezen waar het was.

de truc is om de oorspronkelijke positie aan te passen alvorens deze te draaien, zodat de uiteindelijke output op de juiste plaats is. Om ervoor te zorgen dat het geroteerde resultaat geen enkele tekst hierboven dekt, maar vierkant ligt in het daarvoor bestemde DIV-blok, moeten we het een afstand gelijk aan (width - height)/2naar beneden verplaatsen (waar “/” het verdeel teken vertegenwoordigt). U kunt deze berekening eenvoudig handmatig uitvoeren en de resultaten in de CSS plaatsen, of, als u een record wilt achterlaten van hoe u het uiteindelijke nummer hebt verkregen,laat de browser de berekening voor u doen, met “calc((202px - 42px)/2)“. U zult natuurlijk de nummers moeten veranderen naar de nummers die geschikt zijn voor uw imago. Ik zal de calc() functie in deze tutorial gebruiken, zodat het duidelijker is hoe ik tot het resultaat ben gekomen.

het veranderen van de bovenste positie kan op verschillende manieren worden gedaan, bijvoorbeeld met een margin-top regel, of als u liever de transform functies blijft gebruiken,met translateY().

het volgende voorbeeld gebruikt margin-top:

de onderstaande code maakt gebruik van een transform functie:

Als u translateY() wilt gebruiken, moet u ervoor zorgen dat de vertaling vóór de vertaling wordt uitgevoerd, omdat de volgorde van de bewerkingen significant is.

de bovenste demo-afbeelding werd aangepast met margin-top en geroteerd met behulp van de eerder beschreven exactcode. Maar zoals ik al zei, kunt u elke CSS positionering methode die u wilt gebruiken.

hoe de afbeelding alleen te roteren wanneer deze wordt bekeken op een mobiele telefoon of op een klein scherm

op dit punt zult u waarschijnlijk denken dat om de rotatie alleen uit te voeren wanneer de afbeelding wordt bekeken op een klein scherm zoals een mobiele telefoon, het enige wat u hoeft te doen is de regels in de sectie @mediavoor dat apparaat te plaatsen.

dat is waar. Tot op zekere hoogte. Als je het doet zonder verdere actie te ondernemen, zul je waarschijnlijk nog een ander probleem tegenkomen. Mobile-friendly stylesheets hebben meestal de volgende regels:

deze regel wijzigt de grootte van grote afbeeldingen zodat ze op kleine schermen passen. Dit is de juiste aanpak,behalve als je niet echt wilt dat de afbeelding wordt aangepast maar geroteerd. Met de bovenstaande regel wordt het formaat van de afbeelding door de browser aangepast voordat deze wordt gedraaid, wat niet is wat u hier wilt. Het zal ook uw margin-top (of translateY of wat dan ook) berekeningen weergeven, omdat de afbeelding niet langer zijn oorspronkelijke afmetingen heeft.

voeg om dat te verhelpen ” max-width: none;” toe aan de “#demo_picture ” regels.

met dit in gedachten kunnen we alle regels die we tot nu toe hebben verzameld toevoegen aan het typogram.

stel dat u uw pagina hebt gemaakt op basis van een sjabloon die is gegenereerd door de layout-Wizard en dat u 629 pixels hebt gekozen als het punt waar de pagina overschakelt naar de één-kolommodus voor mobiel phones.In voeg in een dergelijk geval de regels net na de “@media” regel in het”styles.css” bestand.

Als u de lay-Outwizard niet hebt gebruikt, en u ook niet zeker weet hoe u uw eigen @media – sectie kunt maken voor apparaten met een klein scherm, lees dan hoe u een mobielvriendelijke Website kunt maken: Responsive Design in CSS eerst. Kopieer bovenstaande code niet blindelings.

merk op dat u de pagina op een telefoon moet testen (of een bureaubladbrowservenster dat is aangepast om een na te bootsen).Afhankelijk van de breedte en hoogte van uw afbeelding, kunt u vinden dat de resultaten minder danpleasing. Bijvoorbeeld, als het beeld groot is, kunt u de uiteindelijke uitvoer gedeeltelijk worden geklipt aan de rechterkant van de mobiele telefoon. Stel dan een “margin-left” in op uw afbeelding met een passend nummer om deze naar links te verplaatsen. (Tip: Gebruik negatieve getallen inmargin-left om de afbeelding naar links te verplaatsen buiten de oorspronkelijke grenzen.)

browsercompatibiliteit

de transform-functies zijn beschikbaar in alle moderne browsers. Als uw bezoekers gebruik maken van Internet Explorer (die nu verouderd is), hebben ze ten minste versie 9 nodig.

Copyright © 2020 Christopher Heng. Alle rechten voorbehouden.
krijg meer Gratis tips en artikelen zoals deze, over webdesign, promotie, inkomsten en scripting, van https://www.thesitewizard.com/.

vindt u dit artikel nuttig? U kunt leren van nieuwe artikelen en scripts die worden gepubliceerd opthesitewizard.comby abonneren op de RSS-feed. Richt uw RSS-feed-lezer of een browser die RSS-feeds ondersteunt ophttps://www.thesitewizard.com/thesitewizard.xml.U kunt meer lezen over het abonneren toRSS site feeds van mijn RSS FAQ.

gelieve dit artikel niet opnieuw af te drukken

dit artikel is auteursrechtelijk beschermd. Reproduceer of distribueer dit artikel niet geheel of gedeeltelijk, in welke vorm dan ook.

• Hoe te Strekken, een achtergrondafbeelding in te Vullen op de Website (of een Kolom van het) (HTML/CSS)
• Hoe naar het Centrum van een DIV-Blok met Behulp van CSS
• Hoe naar het Centrum van een Afbeelding met CSS
• het Maken van een Rechthoekig Vak met Uw Tekst/Foto ‘ s met CSS
• het Maken van Ronde Hoeken voor Uw Vak Borders in CSS
• het Toevoegen van een Tooltip in HTML/CSS (Geen JavaScript Vereist)
• Hoe om te Registreren Uw Eigen Domein Naam
• Kunt u een domeinnaam registreert rechtstreeks met de ICANN in plaats van via een tussenpersoon?

nieuwe artikelen

• hoe alternatieve rijen van een tabel een andere kleur geven (HTML/CSS)
• hoe genereert u het gratis Let ‘ s Encrypt SSL-certificaat op uw eigen (Windows) Computer
• hoe voegt u Meta-Tags in een webpagina met BlueGriffon
• hoe speelt u een nummer (of een andere audioclip) af uit een lijst op een Website
• Hoe maak ik een horizontale lijn op een webpagina met expressie Web
• Hoe maak ik een website gratis
• Waarom kan ik geen domein maken dat ik wil? Is er een manier om een Registrar helemaal af te schaffen?
• Wat is het verschil tussen een domeinnaam Registrar en een webhost?
• How to Make a Mobile-Friendly Website: Responsive Design in CSS
• Wat is het verschil tussen een Content Management System (CMS), een Blog, Een Web Editor en een online Site Builder?

populaire artikelen

• Hoe maak ik een Blog
• Hoe maak ik een Website: de Beginner ‘ S A-Z Guide
• Tips over het kiezen van een goede domeinnaam
• Expression Web Tutorial: How to Design a Website with Microsoft Expression Web
• Dreamweaver Tutorial: How to Design a Website with Dreamweaver CS6
• BlueGriffon Tutorial: How to Design a Website with BlueGriffon 3
• How to Design and Publish Your Website with KompoZer (free WYSIWYG web editor)
• Free Feedback/Contact Form Wizard

link to This pagina

het zal op uw pagina verschijnen als:

hoe een afbeelding op een website te roteren wanneer deze op een mobiele telefoon (CSS) wordt bekeken