object.style.objectPosition = "value";
<'object-position'> = <position>
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<!doctype html>
<html>
<head>
<style>
img
{
height: calc(100vh - 62px);
object-fit: none;
object-position: center;
width: 100%;
}
</style>
</head>
<body>
<p>center</p>
<img alt="Happy Face" src="/assets/svg/HappyFace.svg">
</body>
</html>
<!doctype html>
<html>
<head>
<style>
img
{
height: calc(100vh - 62px);
object-fit: none;
object-position: left;
width: 100%;
}
</style>
</head>
<body>
<p>left</p>
<img alt="Happy Face" src="/assets/svg/HappyFace.svg">
</body>
</html>
<!doctype html>
<html>
<head>
<style>
img
{
height: calc(100vh - 62px);
object-fit: none;
object-position: 100px 100px;
width: 100%;
}
</style>
</head>
<body>
<p>length</p>
<img alt="Happy Face" src="/assets/svg/HappyFace.svg">
</body>
</html>
<!doctype html>
<html>
<head>
<style>
img
{
height: calc(100vh - 62px);
object-fit: none;
object-position: 100% 100%;
width: 100%;
}
</style>
</head>
<body>
<p>percentage</p>
<img alt="Happy Face" src="/assets/svg/HappyFace.svg">
</body>
</html>
<!doctype html>
<html>
<head>
<style>
img
{
height: calc(100vh - 62px);
object-fit: none;
object-position: right;
width: 100%;
}
</style>
</head>
<body>
<p>right</p>
<img alt="Happy Face" src="/assets/svg/HappyFace.svg">
</body>
</html>
<!doctype html>
<html>
<head>
<style>
img
{
height: calc(100vh - 62px);
object-fit: none;
object-position: top;
width: 100%;
}
</style>
</head>
<body>
<p>top</p>
<img alt="Happy Face" src="/assets/svg/HappyFace.svg">
</body>
</html>
<!doctype html>
<html>
<head>
<style>
img
{
height: calc(100vh - 91px);
object-fit: none;
width: 100%;
}
</style>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">bottom</button>
<button onmouseover="myfunction(innerHTML)">center</button>
<button onmouseover="myfunction(innerHTML)">left</button>
<button onmouseover="myfunction(value)" value="100px 100px">length</button>
<button onmouseover="myfunction(value)" value="100% 100%">percentage</button>
<button onmouseover="myfunction(innerHTML)">right</button>
<button onmouseover="myfunction(innerHTML)">top</button>
<p>object-position</p>
<img alt="Happy Face" src="/assets/svg/HappyFace.svg">
<script>
function myfunction(myparameter)
{
document.querySelector("img").style.objectPosition = myparameter;
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
img
{
height: calc(100vh - 91px);
object-fit: none;
width: 100%;
}
</style>
</head>
<body>
<button>initial</button>
<button>bottom</button>
<button>center</button>
<button>left</button>
<button value="100px 100px">length</button>
<button value="100% 100%">percentage</button>
<button>right</button>
<button>top</button>
<p>object-position</p>
<img alt="Happy Face" src="/assets/svg/HappyFace.svg">
<script>
function myfunction(myparameter)
{
document.querySelector("img").style.objectPosition = myparameter;
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
let myargument = myelement.innerHTML;
if(myelement.value)
{
myargument = myelement.value;
}
myelement.addEventListener("mouseover", function(){myfunction(myargument)});
}
</script>
</body>
</html>