• Articles
• admin

por Christopher Heng, thesitewizard.com

Um visitante perguntou-me como poderia transformar uma imagem de forma que ela é apresentada verticallywhen alguém viu sua página da web em um celular. Ou seja, ele queria que a imagem fosse mostrada em seu habitualorientação, com o lado mais longo horizontal, em um computador desktop ou laptop, mas girado em um telefone, então o lado mais longo agora é vertical.

preâmbulo

• este artigo trata de uma imagem que deve ser exibida de forma diferente em monitores de computadorese telefones celulares. Se você simplesmente deseja girar uma imagem permanentemente para que ela esteja sempre nessa posiçãoindependentemente de como ela é visualizada, basta usar o Animage editorto do it. É muito mais simples e eficiente, e evita os problemas que surgem quando você obtém CSS para a rotação para você.

• uma alternativa para girar uma imagem é encolhê-la para caber na largura da tela de um telefone celular. A maioria dos sites Faz assim. Se você preferir isso, por favor readhowpara fazer suas imagens Mobile-Friendly (Design Responsivo) em vez disso. Eu também tenho um artigo que mostravocê como ocultar imagens em um site quando é visto em um telefone celular.

• o Meu visitante tinha um site que usou a 2 coluna de layout gerado pelo oconectividade-FriendlyLayout Assistente, mas você também pode usar as técnicas descritas abaixo, em um site projetado usingany layout, auto-criado ou obtido a partir de outro lugar. Ou seja, o método é um Geral que pode ser usadoindependentemente de como você projetou o site.

• obviamente, este artigo pressupõe que você já tenha um site. Caso contrário, comece com o guia sobrecomo criar um site.Você sempre pode retornar a este artigo para ajustar as coisas depois de concluir o design básico.

como girar uma imagem em CSS

digamos que você tenha uma imagem com um id de “demo_picture”. Para girá-lo, use o seguinte CSS.

se isso girar sua imagem na direção errada, use rotate(90deg) em vez disso. Como youmay adivinhou, você pode usar qualquer ângulo que você gosta. Meu uso de 270 e 90 graus é porqueO tópico em questão é girá-lo para que seu comprimento seja agora a altura e vice-versa.

no entanto, se você simplesmente usar o código acima, notará rapidamente um problema. A imagem gira em torno deum ponto em seu centro (“centro” se você usar adifferentvariant de Inglês). Isso significa que a imagem girada se sobreporá ao Conteúdo acima e abaixo dela.

neste ponto, você provavelmente pensará: “Hmm. Isso é fácil de resolver. Vou apenas colocar a imagem em seu próprio bloco DIV com uma altura fixa que dá espaço suficiente para a imagem girada.”

então, para uma imagem tem uma largura de (digamos) 202 pixels e uma altura de 42 pixels, o HTML parecerá algo assim:

E o CSS para dar o bloco DIV altura necessária é:

Infelizmente, se você usar o código como está, você vai descobrir que enquanto o recipiente tem o requisito de altura,a imagem girada ainda vai sobrepor o parágrafo acima, deixando uma grande lacuna abaixo, sinceit gira em torno do seu centro, mantendo-se, essencialmente, de onde ele estava.

o truque é ajustar sua posição original antes de girá-lo, de modo que a saída final esteja no lugar correto. Para se certificar de que o resultado girado não cobre nenhum texto acima, mas está diretamente no bloco DIV alocado para ele, precisamos movê-lo uma distância igual a (width - height)/2para baixo (onde “/” representa o sinal de divisão). Você pode facilmente executar este cálculo manualmente e putthe resultados para o CSS, ou, se quiser deixar um registro de como você obteve o número final,deixar o navegador fazer o cálculo para você, com “calc((202px - 42px)/2)“. Você,é claro, terá que alterar os números para os apropriados para sua imagem. Vou usar a função calc() neste tutorial para que fique mais claro como cheguei ao resultado.

alterar a posição superior pode ser feito de várias maneiras, por exemplo,com uma regra margin-top, ou se você preferir continuar a usar as funções tranform, com translateY().

O exemplo a seguir usa margin-top:

O código a seguir usa uma função de transformação:

Se você escolher usar o translateY(), certifique-se de que a tradução é feita antes de therotation, desde que a ordem das operações é significativa.

a imagem de demonstração acima teve sua posição superior ajustada com margin-top e girada, usando o código exact descrito anteriormente. Mas como eu disse, Você pode usar qualquer método de posicionamento CSS que desejar.

Como Girar a Imagem Apenas Quando Visto em um Telefone Celular ou Tela Pequena

neste ponto, você provavelmente vai pensar que, para executar a rotação apenas quando a imagem é vista em uma smallscreen dispositivo, como um telefone celular, tudo que você precisa fazer é colocar as regras em @mediaseção para esse dispositivo.

isso é verdade. Até certo ponto. Se você fazê-lo sem tomar qualquer outra ação, você vai probablyencounter mais um problema. As folhas de estilo compatíveis com dispositivos móveis normalmente têm regras como as seguintes:

esta regra redimensiona imagens grandes para que caibam em telas pequenas. Esta é a abordagem correta a ser tomada,exceto quando você realmente não quer que a imagem seja redimensionada, mas girada. Com a regra geral acima, a imagem é redimensionada pelo navegador antes de ser girada, o que não é o que você deseja aqui. Ele também aumentará seus cálculos margin-top (ou translateY ou qualquer outra coisa), uma vez que a imagem não terá mais suas dimensões originais.

para corrigir isso, adicione “max-width: none;” às regras “#demo_picture“.

com isso em mente, podemos adicionar todas as regras que acumulamos até agora à folha de estilo.

digamos que você tenha criado a sua página baseada em um modelo gerado por theLayout Assistente,e você escolheu 629 pixels, como o ponto onde ele alterna para o modo de coluna para telefones móveis.Em tal caso, inserir as regras apenas após o “@media” linha”styles.css” ficheiro.

se você não usou o Assistente de Layout e também não tem certeza de como criar sua própria seção @media para dispositivos de tela pequena, leia Como fazer um site compatível com Dispositivos Móveis: Design Responsivo em CSS primeiro. Não copie cegamente o código acima.

observe que você precisará testar a página em um telefone (ou uma janela do navegador da área de trabalho redimensionada para imitar uma).Dependendo da largura e altura da sua imagem, você pode achar que os resultados são menos do que agradáveis. Por exemplo, se a imagem é grande, você pode encontrar a saída final para ser partiallyclipped no lado direito do telefone móvel. Em caso afirmativo, defina um” margin-left ” emsua imagem com um número apropriado para movê-lo para a esquerda. (DICA: use números negativos emmargin-left para mover a imagem para a esquerda além de seus limites originais.)

compatibilidade do navegador

as funções de transformação estão disponíveis em todos os navegadores modernos. Se seus visitantes usarem o Internet Explorer( que agora está obsoleto), eles precisarão de pelo menos a versão 9.

Copyright © 2020 Christopher Heng. Todos os direitos reservados.
Obtenha mais dicas e artigos gratuitos como este, Sobre web design, Promoção, receita e scripting, a partir de https://www.thesitewizard.com/.

você acha este artigo útil? Você pode aprender de novos artigos e scripts que são publicados emthesitewizard.comby assinando o feed RSS. Basta apontar o seu leitor de feed RSS ou um navegador que suporta feeds RSS emhttps://www.thesitewizard.com/thesitewizard.xml.Você pode ler mais sobre como se inscrever torss site feeds do meu RSS FAQ.

por favor, não reimprima este artigo

este artigo está protegido por direitos autorais. Por favor, não reproduza ou distribua este artigo no todo ou em parte, de qualquer forma.

• Como Esticar uma Imagem de plano de Fundo para Preencher Todo o Site (ou uma Coluna de) (HTML/CSS)
• Como Centro de um Bloco DIV Usando CSS
• Como Centro de uma Imagem com CSS
• Como Criar uma Caixa Retangular para Conter o Seu Texto/Imagens com CSS
• Como Criar Cantos Arredondados para Sua Caixa de Bordas com CSS
• Como Adicionar uma Dica de ferramenta em HTML/CSS (Nenhum código JavaScript Necessário)
• Como Registrar Seu Próprio Nome de Domínio
• você Pode registrar um nome de domínio diretamente com a ICANN, em vez de através de um intermediário?

Novos Artigos

• Como Dar Alternativo Linhas de uma Tabela de Cores Diferentes (HTML/CSS)
• Como Gerar o Livre Vamos Criptografar Certificado SSL em Seu Próprio (Windows) Computador
• Como Inserir Meta Tags em uma Página da Web com o BlueGriffon
• Como Tocar uma Música (ou Algum Outro Clipe de Áudio) a partir de uma Lista em um Site
• Como Desenhar uma Linha Horizontal em uma Página da Web com o Expression Web
• Como Criar um Site Gratuitamente
• Por que não Posso Fazer o Backup de Qualquer Domínio que eu Quero? Existe uma maneira de acabar com um registrador completamente?
• Qual é a diferença entre um registrador de nomes de domínio e um Host da Web?
• como fazer um site compatível com Dispositivos Móveis: Design Responsivo em CSS
• Qual é a diferença entre um sistema de gerenciamento de conteúdo (CMS), um Blog, Um Editor da Web e um construtor de sites on-line?

Artigos Populares

• Como Criar um Blog
• Como Fazer / Criar um Site: A Beginner’s de A A Z-Guia
• Dicas sobre como Escolher um Bom Nome de Domínio
• Expression Web Tutorial: Como criar um Site com o Microsoft Expression Web
• Tutorial: Como criar um Site com o Dreamweaver CS6
• BlueGriffon Tutorial: Como criar um Site com o BlueGriffon 3
• Como criar e Publicar Seu Site com KompoZer (gratuito WYSIWYG editor web)
• Livre Feedback/Contato Assistente de Formulário

Como Link para Esta Página

vai aparecer em sua página:

Como Girar uma Imagem em um Site, Quando Vistos em um Telefone Celular (CSS)