La propiedad objectPosition de estilo DOM se usa para establecer o devolver cómo se colocaría una imagen o video en su propio cuadro de contenido.
Sintaxis:
- Devuelve la propiedad objectPosition.
object.style.objectPosition
- Se utiliza para establecer la propiedad objectPosition.
object.style.objectPosition = "position|initial|inherit"
Valores de propiedad:
- position: Esto se usa para especificar la posición de la imagen o video en términos de valores de longitud o strings (izquierda, derecha y centro).
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style objectPosition Property
</title>
<style>
.content {
border: 1px solid;
object-fit: cover;
height: 250px;
width: 500px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style objectPosition Property
</b>
<p>
The objectPosition property
specify how an image or video
should be positioned in its content box.
</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png"
height="800"
width="800"
class="content" />
<button onclick="setObjectPosition()">
Change resize
</button>
<!-- Script to set objectPosition to 50% 100% -->
<script>
function setObjectPosition() {
elem = document.querySelector('.content');
elem.style.objectPosition = '75% 100%';
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- initial: se utiliza para establecer esta propiedad en su valor predeterminado.
Ejemplo-2:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style objectPosition Property
</title>
<style>
.content {
border: 1px solid;
object-fit: cover;
height: 250px;
width: 500px;
object-position: 50% 100%;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style objectPosition Property
</b>
<p>
The objectPosition property specify
how an image or video should be
positioned in its content box.
</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png"
height="800"
width="800"
class="content" />
<button onclick="setObjectPosition()">
Change resize
</button>
<!-- Script to set objectPosition to initial -->
<script>
function setObjectPosition() {
elem = document.querySelector('.content');
elem.style.objectPosition = 'initial';
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- heredar: Esto hereda la propiedad de su padre.
Ejemplo-3:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style objectPosition Property
</title>
<style>
#parent {
object-position: 50% 100%;
}
.content {
border: 1px solid;
object-fit: cover;
height: 250px;
width: 500px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style objectPosition Property
</b>
<p>
The objectPosition property specify how an
image or video should be positioned in its content box.
</p>
<div id="parent">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png"
height="800"
width="800"
class="content" />
</div>
<button onclick="setObjectPosition()">
Change resize
</button>
<!-- Script to set objectPosition to inherit -->
<script>
function setObjectPosition() {
elem = document.querySelector('.content');
elem.style.objectPosition = 'inherit';
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad objectPosition se enumeran a continuación:
- Google Chrome 32.0 y superior
- Edge 79 y superior
- Firefox 36.0 y superior
- Ópera 19.0 y superior
- Apple Safari 10 y superior
- Internet Explorer no es compatible
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA