브라우저 크기에 따라 해상도를 자동으로 조정하는 전체 크기 이미지

Question

배송 웹사이트가 있습니다.

호버 이미지를 전체 화면에 채우고 컴퓨터 화면 해상도와 독립적으로 만들려면 어떻게 해야 합니까? 브라우저 창을 축소하면 창도 잘리고 축소되어야 합니다. 감사해요.

.hover-image {
   디스플레이: 플렉스;
   위치: 고정;
   최고: 50%;
   왼쪽: 50%;
   변환: 변환(-50%, -50%);
   Z-색인: -1;
   포인터 이벤트: 없음;
   플렉스 방향: 열;
   항목 정렬: 중앙;
   내용 정당화: 센터;

/* 너비와 높이를 크기가 조정된 이미지로 변경 */
      폭: 100vw;
   높이: 자동;
}

.hover-image img {
    최대 너비: 100% !중요;
    최대 높이: 100% !중요;
    너비: 자동!중요;
    높이: 자동!중요;
    여백 하단: 0;
}

이미지 호버 원 {이미지 1} 이미지 호버 2 {이미지 2}

픽셀을 사용해 보았으나 이는 해상도에 따라 다릅니다.

Answer 1

이 CSS 코드는 마우스 오버 시 이미지가 가로 세로 비율을 유지하면서 전체 화면을 덮도록 만듭니다. 이미지는 필요에 따라 잘리고 브라우저 창 크기가 조정될 때 조정됩니다. 컨테이너는 중앙 표시를 위해 고정 위치 지정 및 플렉스 정렬을 사용하는 반면, object-fit:cover는 자르기를 보장합니다.

으아악 으아악