Existem muitos métodos para posicionar a imagem em CSS, como usar o posição do objeto propriedade, usando o flutuador propriedade (para alinhar os elementos à esquerda ou à direita).

cm para pés e polegadas

Usando a propriedade object-position

O posição do objeto propriedade em CSS especifica o alinhamento do conteúdo dentro do contêiner. É usado com ajuste ao objeto propriedade para definir como um elemento como ou está posicionado com coordenadas x/y em sua caixa de conteúdo.

Ao usar o ajuste ao objeto propriedade, o valor padrão para posição do objeto é 50% 50% , portanto, por padrão, todas as imagens são posicionadas no centro da caixa de conteúdo. Podemos alterar o alinhamento padrão usando o posição do objeto propriedade.

Sintaxe

 object-position: | initial | inherit; 

O posição valor do posição do objeto propriedade define a posição do vídeo ou imagem dentro do contêiner. Aceita dois valores numéricos, onde o primeiro valor controla o eixo x e o segundo valor controla o eixo y. Podemos usar a string como esquerda direita , ou Centro , etc. para posicionar a imagem no contêiner. Permite valores negativos.

Podemos entendê-lo mais claramente usando alguns exemplos.

lista de matrizes

Exemplo

Neste exemplo, estamos usando valores de string como 'topo direito', 'topo central', e 'topo esquerdo' para posicionar a imagem.

 CSS object-position property #center { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: center top; } #left { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: left top; } #right { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: right top; } <h3>object-position: center top;</h3> <h3>object-position: left top;</h3> <h3>object-position: right top;</h3> 

Saída

Agora, há outro exemplo de uso do posição do objeto propriedade.

Exemplo

Neste exemplo, estamos usando o inicial valor que posicionou a imagem no centro. É porque a inicial define a propriedade com seu valor padrão, que é 50% 50% . Também estamos usando os valores numéricos 200 pixels e 100 pixels .

 CSS object-position property #num { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: 200px 100px; } #init { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: initial; } <h3>object-position: 200px 100px;</h3> <h3>object-position: initial;</h3> 

Saída

Usando a propriedade float

A propriedade float CSS é uma propriedade de posicionamento usada para empurrar um elemento para a esquerda ou direita, permitindo que outros elementos o envolvam. Geralmente, é usado com imagens e layouts.

scanner java próximo

Os elementos flutuam apenas horizontalmente. Portanto, só é possível flutuar elementos para a esquerda ou para a direita, não para cima ou para baixo. Um elemento flutuante pode ser movido o mais para a esquerda ou para a direita possível. Simplesmente, significa que um elemento flutuante pode ser exibido na extrema esquerda ou na extrema direita.

Vamos dar um exemplo de uso do flutuador propriedade.

Exemplo

 CSS float property #left { float: left; } #right { float: right; } 

Saída