Como mover uma imagem no CSS

Você pode fazer o layout do seu site e alterar as imagens relevantes usando as folhas de estilo em cascata (CSS). Para esses empregos, o CSS fornece uma variedade de alternativas. O CSS, para seu crédito, também abrange uma ampla variedade de formatos de imagem e tipos, incluindo raster como jpeg, vetor como SVG, combinação e imagens sem vida.

Existem várias técnicas para posicionar a imagem, como a utilização da propriedade de posição de objetos ou a propriedade FLOAT. Vamos discutir essas duas técnicas com códigos de exemplo praticamente implementados neste artigo.

Utilizando a propriedade de posição de objetos

A propriedade de posição de objetos define as coordenadas X e Y para a localização de um elemento de imagem em seu contêiner de conteúdo. O valor padrão da posição de objeto sempre que invocar o atributo de ajuste de objeto é de 50%. Como resultado, todos os gráficos são colocados no meio do respectivo contêiner de conteúdo por padrão. Usando o atributo de posição de objetos, você pode ajustar o alinhamento padrão da propriedade de posição de objetos funções de maneira semelhante ao argumento de preserveaspetratio no SVG. Para especificar os tamanhos e a posição dos gráficos externos incluídos no HTML, o atributo de posição de objetos é exercido. Especificamente, as imagens incluídas na tag também podem ser usadas em outros tipos de componentes substituídos, como