Hay muchos métodos para posicionar la imagen en CSS, como usar el posición del objeto propiedad, utilizando el flotar propiedad (para alinear los elementos a la izquierda o a la derecha).

Usando la propiedad de posición del objeto

El posición del objeto La propiedad en CSS especifica la alineación del contenido dentro del contenedor. Se utiliza con el ajuste de objeto propiedad para definir cómo un elemento le gusta o se coloca con coordenadas x/y en su cuadro de contenido.

Al usar el ajuste de objeto propiedad, el valor predeterminado para posición del objeto es 50% 50% , por lo que, de forma predeterminada, todas las imágenes se colocan en el centro de su cuadro de contenido. Podemos cambiar la alineación predeterminada usando el posición del objeto propiedad.

js cadena multilínea

Sintaxis

 object-position: | initial | inherit; 

El posición valor de la posición del objeto La propiedad define la posición del video o imagen dentro del contenedor. Acepta dos valores numéricos, donde el primer valor controla el eje x y el segundo valor controla el eje y. Podemos usar la cadena como izquierda derecha , o centro , etc. para posicionar la imagen en el contenedor. Permite valores negativos.

Podemos entenderlo más claramente usando algunos ejemplos.

Ejemplo

En este ejemplo, estamos usando valores de cadena como 'arriba derecha', 'arriba central', y 'arriba izquierda' para posicionar la imagen.

 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> 

Producción

no nulo en js

Ahora, hay otro ejemplo del uso de la posición del objeto propiedad.

Ejemplo

En este ejemplo, estamos usando el inicial valor que colocó la imagen en el centro. Es porque el valor inicial establece la propiedad en su valor predeterminado, que es 50% 50% . También estamos usando los valores numéricos. 200px y 100px .

 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> 

Producción

Usando la propiedad flotante

La propiedad flotante de CSS es una propiedad de posicionamiento que se utiliza para empujar un elemento hacia la izquierda o hacia la derecha, permitiendo que otros elementos lo rodeen. Generalmente, se utiliza con imágenes y diseños.

inkscape vs gimp

Los elementos flotan sólo horizontalmente. Por lo tanto, sólo es posible hacer flotar elementos hacia la izquierda o hacia la derecha, no hacia arriba o hacia abajo. Un elemento flotante se puede mover lo más hacia la izquierda o hacia la derecha posible. Simplemente, significa que un elemento flotante se puede mostrar en el extremo izquierdo o derecho.

Tomemos un ejemplo del uso de flotar propiedad.

Ejemplo

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

Producción