I have the following code snippet:
img{
width: 100%;
height: 1000px;
object-fit: cover;
object-position: left;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0>
<title>Document</title>
</head>
<body>
<img src="https://source.unsplash.com/a-woman-is-shopping-in-a-grocery-store-pf82pJc-4pc" alt="">
</html>When I resize the screen, the image moves to the left. However, at screen widths below 500px, the girl in the image starts to disappear. My goal is to make sure that when resizing the screen, the image focuses on the girl so that even on a phone, the image remains centered around her.