Os desenvolvedores definem a posição de uma imagem para estabelecer uma hierarquia visual clara, determinando a ordem e as dimensões da imagem em relação a outros elementos HTML. Ao colocar a imagem em várias posições, designs modernos, exclusivos e personalizados também podem ser gerados, o que pode mudar a aparência do site. Este artigo demonstra o procedimento para definir a posição de uma imagem usando CSS.
Como definir a posição de uma imagem em CSS?
Ao definir a posição de uma imagem em CSS, os benefícios como “ posicionamento preciso ”, “ elemento sobreposto ' e ' design responsivo ” pode ser facilmente alcançado. Usando esses benefícios, os desenvolvedores podem facilmente personalizar e criar um site totalmente funcional e atraente. Existem dois métodos/propriedades pelos quais a posição de uma imagem pode ser definida. Essas propriedades são descritas a seguir:
Método 1: usando a propriedade Float
O ' flutuador ” propriedade é fornecida pelo CSS para o movimento de elementos HTML no “ esquerda ' ou ' certo ” direção. É utilizado principalmente ao criar o layout responsivo para o posicionamento preciso dos elementos HTML.
Por exemplo, a propriedade “float” é utilizada para alinhar imagens nos lados esquerdo e direito da página da web:
< div >
< img origem = 'bg.jpg' altura = '300 px' largura = '400 px' aula = 'Posição à direita' >
< img origem = 'livro.jpg' altura = '300 px' largura = '400 px' aula = 'posiçãoEsquerda' >
div >
No código acima:
-
- Primeiro, a raiz “ div ” é criado o elemento que funciona como um contêiner para elementos HTML.
- A seguir, dois “
” tags são utilizadas dentro do “
' marcação.- Depois disso, os valores de “ 300px ' e ' 400 px ” são fornecidos ao “ altura ' e ' largura ” atributos de ambos “
' Tag.
- Além disso, atribua uma classe de “ Posição à direita ' e ' posiçãoEsquerda ” à primeira e segunda tags “
”, respectivamente.
Agora, digite o “
< estilo >” para aplicar as seguintes propriedades CSS:
.Posição à direita {
flutuar: direita;
}
.positionLeft {
flutuar: esquerda;
}
estilo >
A descrição é dada abaixo:
-
- Primeiro, selecione a opção “ Posição à direita ” e defina o valor de “ certo ” ao seu “ flutuador ' propriedade. Isso move o elemento HTML selecionado na direção certa na página da web.
- Em seguida, selecione a opção “ posiçãoEsquerda ” e forneça o valor de “ esquerda ' para o ' flutuador ' propriedade. Isso move o elemento para mover para o lado esquerdo.
Após o final da fase de compilação:
A saída mostra que as imagens foram definidas para as posições esquerda e direita.Método 2: usando a propriedade de posição do objeto
O ' posição de objeto ” garante o posicionamento da imagem ou elemento HTML em uma posição específica na página da web. Dá controle sobre o posicionamento horizontal e vertical, permitindo ao usuário obter o efeito visual ou layout desejado. É utilizado principalmente por desenvolvedores para corte de imagens, criação de miniaturas, layouts personalizados, etc.
Essa propriedade pode receber valores numéricos e de palavra-chave. Por exemplo, valores numéricos e de palavra-chave são fornecidos para o “ posição de objeto ' propriedade. Ele define a posição de uma imagem em CSS no trecho de código abaixo:
< estilo >
.valores numéricos
{
posição do objeto: 100px 20px;
}
.keywordValues
{
posição do objeto: esquerda;
}
estilo >
< corpo >
< div >
< img origem = 'livro.jpg' altura = '300 px' largura = '400 px' aula = 'valores-chave' >
< img origem = 'bg.jpg' altura = '300 px' largura = '400 px' aula = 'valores numéricos' >
div >
corpo >
No trecho de código acima:-
- Primeiro, o “ valores numéricos ” classe é selecionada dentro do “
' marcação. E os valores numéricos de “ 100px 20px ” são fornecidos ao CSS “ posição de objeto ' propriedade. O ' 100px ” é o espaço adicionado na direção horizontal e o “ 20px ” para a vertical. - A seguir, o “ valores de palavras-chave ” é selecionada e o valor da palavra-chave “ esquerda ” é fornecido ao “ posição de objeto ” para alinhar a imagem na direção esquerda.
- Depois disso, dentro do “
” duas imagens são criadas e as classes criadas acima são atribuídas a elas.
- Primeiro, o “ valores numéricos ” classe é selecionada dentro do “
Após o final da fase de compilação, a página da Web aparece assim:
O instantâneo ilustra que as imagens agora estão definidas em posições específicas.Conclusão
A posição de uma imagem pode ser definida usando CSS “ flutuador ' e ' posição de objeto ” propriedades. O ' flutuador ” assume a palavra-chave como um valor e move o elemento nas posições esquerda ou direita. Por outro lado, o “ posição de objeto ”, usa palavras-chave e valores numéricos nas direções horizontal e vertical. Este artigo demonstrou o procedimento para definir a posição de uma imagem em CSS.
- Depois disso, os valores de “ 300px ' e ' 400 px ” são fornecidos ao “ altura ' e ' largura ” atributos de ambos “