issue

다음과 같이 Chrome에서 img 태그에 margin을 붙이지 않지만 object-fit 속성으로 cover를 붙일 때 상단에 공백이 생길 수 있습니다.
safari에는 상단 공백이 없습니다.

응급 처치 방법

img 태그의 부모 요소에

display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 0;

img 태그에

grid-row: 1;
grid-column: 1;

가볍게 해설하면
display : grid에서 자식 요소가 부모 요소의 원점 왼쪽 상단으로 이동하기 때문에 img 태그 위에 공백이 없어집니다.
grid-template-columns: 1fr에서 첫 번째 열 1이 1fr
grid-template-rows: 1fr 0으로 1행째가 1fr2행째는 0

chrome 환경에서 디폴트로 2행째의 space가 확보되어 버리므로 2행째를 0 지정하고 있다
1fr은 스스로 조사해 주세요

grid-row는 아이 요소인 img 태그를 몇 행분 확보할까이므로 1행분 확보하고 있다(아이 요소가 하나를 위해)
grid-column은 img 태그를 몇 열분 확보하는가를 위해 1열분 확보하고 있다

이상
최선을 다하십시오.