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> Pruébalo ahora 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> Pruébalo ahora 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; } Pruébalo ahora Producción
