Los desarrolladores establecen la posición de una imagen para establecer una jerarquía visual clara al determinar el orden y las dimensiones de la imagen en relación con otros elementos HTML. Al colocar la imagen en varias posiciones, también se pueden generar diseños modernos, únicos y personalizados que pueden cambiar la apariencia del sitio web. Este artículo demuestra el procedimiento para establecer la posición de una imagen usando CSS.
¿Cómo establecer la posición de una imagen en CSS?
Al establecer la posición de una imagen en CSS, los beneficios como ' colocación precisa ”, “ elemento superpuesto ' y ' diseño de respuesta ” se puede lograr fácilmente. Con estos beneficios, los desarrolladores pueden personalizar y crear fácilmente un sitio web completamente funcional y llamativo. Hay dos métodos/propiedades mediante los cuales se puede establecer la posición de una imagen. Estas propiedades se describen a continuación:
Método 1: usar la propiedad flotante
El ' flotar La propiedad ” es proporcionada por el CSS para el movimiento de elementos HTML en el “ izquierda ' o ' bien ' dirección. Se utiliza principalmente al crear el diseño receptivo para la ubicación precisa de los elementos HTML.
Por ejemplo, la propiedad 'flotante' se utiliza para alinear imágenes en los lados izquierdo y derecho de la página web:
< división >
< imagen origen = 'bg.jpg' altura = '300px' ancho = '400 píxeles' clase = 'posicionDerecha' >
< imagen origen = 'libro.jpg' altura = '300 píxeles' ancho = '400 píxeles' clase = 'posicionIzquierda' >
división >
En el código anterior:
-
- Primero, la raíz “ división Se crea un elemento que funciona como contenedor de elementos HTML.
- A continuación, dos “
Las etiquetas 'se utilizan dentro de'
' etiqueta.- Después de eso, los valores de “ 300px ' y ' 400px ” se proporcionan a la “ altura ' y ' ancho “atributos de ambos”
” etiquetas.
- Además, asigne una clase de “ posiciónDerecha ' y ' posición izquierda ” a la primera y segunda etiqueta “
”, respectivamente.
Ahora, ingrese el “
< estilo >” etiqueta para aplicar las siguientes propiedades CSS:
.posicionDerecha {
flotar derecho;
}
.posiciónIzquierda {
flotador izquierdo;
}
estilo >
La descripción se da a continuación:
-
- Primero, seleccione el “ posiciónDerecha ” clase y establecer el valor de “ bien ' a su ' flotar ' propiedad. Esto mueve el elemento HTML seleccionado en la dirección correcta en la página web.
- A continuación, seleccione el “ posición izquierda ” clase y proporcione el valor de “ izquierda ' hacia ' flotar ' propiedad. Esto mueve el elemento para moverse hacia el lado izquierdo.
Después del final de la fase de compilación:
El resultado muestra que las imágenes se han configurado en las posiciones izquierda y derecha.Método 2: Uso de la propiedad de posición del objeto
El ' posición del objeto ” asegura la ubicación de la imagen o elemento HTML en una posición específica en la página web. Brinda control sobre el posicionamiento horizontal y vertical, lo que permite al usuario lograr el efecto visual o diseño deseado. Los desarrolladores lo utilizan principalmente para recortar imágenes, crear miniaturas, diseños personalizados, etc.
Esta propiedad puede tomar valores numéricos y de palabras clave. Por ejemplo, se proporcionan valores numéricos y de palabras clave para el ' posición del objeto ' propiedad. Establece la posición de una imagen en CSS en el siguiente fragmento de código:
< estilo >
.valores numéricos
{
posición del objeto: 100px 20px;
}
.keywordValues
{
posición del objeto: izquierda;
}
estilo >
< cuerpo >
< división >
< imagen origen = 'libro.jpg' altura = '300px' ancho = '400px' clase = 'valores de palabra clave' >
< imagen origen = 'bg.jpg' altura = '300px' ancho = '400px' clase = 'valores numéricos' >
división >
cuerpo >
En el fragmento de código anterior:-
- Primero el ' valores numéricos La clase ” se selecciona dentro del “
' etiqueta. Y los valores numéricos de “ 100 píxeles 20 píxeles ” se proporcionan a la CSS “ posición del objeto ' propiedad. El ' 100 píxeles ” es el espacio agregado en la dirección horizontal y el “ 20px ” para la vertical. - A continuación, el “ valores de palabra clave Se selecciona la clase ” y el valor de palabra clave de “ izquierda ” se proporciona a la “ posición del objeto ” propiedad para alinear la imagen hacia la dirección izquierda.
- Después de eso, dentro del “
Se crean dos imágenes y se les asignan las clases creadas anteriormente.
- Primero el ' valores numéricos La clase ” se selecciona dentro del “
Después del final de la fase de compilación, la página web aparece así:
La instantánea ilustra que las imágenes ahora están configuradas en posiciones específicas.Conclusión
La posición de una imagen se puede establecer usando CSS “ flotar ' y ' posición del objeto ' propiedades. El ' flotar La propiedad ” toma la palabra clave como un valor y mueve el elemento a la izquierda o a la derecha. Por otro lado, el “ posición del objeto ”, toma palabras clave y valores numéricos en direcciones horizontales y verticales. Este artículo ha demostrado el procedimiento para establecer la posición de una imagen en CSS.
- Después de eso, los valores de “ 300px ' y ' 400px ” se proporcionan a la “ altura ' y ' ancho “atributos de ambos”