Puede colocar fácilmente una imagen utilizando la propiedad object-position . También puede usar muchas otras formas, como la propiedad flotante, que se analizará más adelante en este artículo.
Métodos:
- propiedad de posición del objeto: especifique cómo se coloca un elemento de imagen con las coordenadas x, y dentro de su cuadro de contenido.
- propiedad flotante: especifique cómo debe flotar un elemento y coloque un elemento en el lado derecho o izquierdo de su contenedor.
Método 1: usar la propiedad de posición del objeto
Sintaxis:
object-position: <position>
Valores de propiedad:
- posición: Toma 2 valores numéricos correspondientes a la distancia desde la izquierda del cuadro de contenido (eje x) y la distancia desde la parte superior del cuadro de contenido (eje y) respectivamente.
Nota:
- Podemos alinear elementos usando la propiedad de posición con alguna propiedad auxiliar izquierda | derecha | parte superior | abajo.
- Puede usar valores de string como derecha, izquierda, centro, arriba, o puede usar valores numéricos en píxeles como 200px, 250px.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#object1 {
width: 500px;
height: 200px;
background-color: green;
object-fit: none;
object-position: center top;
/* String value */
}
#object2 {
width: 500px;
height: 200px;
background-color: green;
object-fit: none;
object-position: 50px 30px;
/* Numeric value */
}
</style>
</head>
<body>
<center>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h4>object-position Property</h4>
<img id="object1"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210412211244/Screenshotfrom20210412211213-300x159.png" />
<img id="object2"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210412211244/Screenshotfrom20210412211213-300x159.png" />
</center>
</body>
</html>
Producción:
posición del objeto
Método 2: usar la propiedad float
Sintaxis:
float: none|inherit|left|right|initial;
Nota: los elementos flotan solo horizontalmente, es decir, a la izquierda o a la derecha
El valor de la propiedad:
- izquierda: Coloca un elemento a la derecha de su contenedor.
- right: Coloca un elemento a la izquierda de su contenedor.
- heredar: el elemento hereda la propiedad flotante de sus elementos principales (div, tabla, etc.).
- ninguno: el elemento se muestra tal cual (predeterminado).
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#object1 {
width: 300px;
height: 200px;
float: right;
}
center {
width: 500px;
height: 500px;
background-color: green;
}
</style>
</head>
<body>
<center>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h4>Float Property</h4>
<img id="object1"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210412211244/Screenshotfrom20210412211213-300x159.png" />
</center>
</body>
</html>
Producción:
propiedad flotante
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA