이미지에 오버레이를 넣고 다양한 종횡비에 맞춥니다.

머리말

나는 프론트 엔드 사람이라고 말하지 않을 것입니다. 하지만 우리 회사에서는 대부분 풀스택 방식으로 프로젝트를 수행해야 합니다. 즉, 작업의 프런트엔드 측면도 만져야 합니다. 그리고 여기에 제가 해결해야 할 흥미로운 문제가 있습니다 ;D

문제

텍스트로 가득 찬 이미지의 특정 문구를 강조 표시해야 합니다. 이미지의 (x,y,height,width) 세트가 제공됩니다. (x,y,height,width)는 백분율로 표시되므로 이미지에 오버레이를 그리기 위해 다음을 간단히 수행할 수 있습니다(텍스트 danger 및 science를 강조 표시하려면 아래 예 참조).

overlay {
    left: x%;
    top: y%;
    height: height%;
    width: width%;
}

좋아 그럼 다음은 어때?

종횡비가 다른 뷰포트에 맞춰야 한다면 어떻게 할까요? 동시에 원본과 동일한 것을 강조하면서?

다른 뷰포트에 맞추기

그러기 위해서는 우리가 알아야 할

원본 이미지의 어느 부분을 표시해야 하는지, 그리고

새 위치를 확장하는 방법

가정

단순화를 위해 너비가 항상 유지되어야 한다고 가정합니다. 4629/10110 이미지를 700/500 뷰포트에 맞출 때

원본 이미지의 어느 부분을 보여줘야 할까요

css 속성background-position이 유용합니다. 그리고 background-position의 작동 방식을 명확하게 설명하는 의 기사에 큰 감사를 드립니다. 작동 방식을 안다면 간단한 수학으로 새 위치를 계산할 수 있습니다.

TL;DR

새 값background-position-y으로 설정할 수 있도록 최소 y를 알아야 합니다.

그런 다음 스케일링 후 새 y' 및 height'를 계산해야 합니다. (여기서는 수학을 건너뛰고 있지만 관심이 있는 경우 아래 예를 자유롭게 살펴보십시오)

그리고 마침내 우리는 다음과 같은 결과를 얻을 수 있었습니다 ;D

요약하면

물론 완벽한 해결책은 아닙니다. 문제를 해결할 때 사용할 수 있는 css 속성을 데모하려고 합니다. 다른 처리/최적화도 필요합니다.

하이라이트가 (부분적으로) 뷰포트 밖에 있으면 어떻게 됩니까?

x가 변경되지 않은 상태에서 일부 좌표가 뷰포트에 맞지 않으면 어떻게 됩니까? 그런 다음 확장x도 필요합니다.

기타...

이것에 대한 다른 접근 방식이 있는지 듣고 싶습니다!