Put Overlays on image and fit in different aspect ratios

Preface

I would not say I am a frontend guy. But most of the time in my company I need to do projects in a fullstack way, meaning that I need to touch the frontend side of work as well. And here comes an interesting problem for me to solve ;D

Problem

We need to highlight certain phrases of an image full of text. We're given sets of (x,y,height,width) of the image. The (x,y,height,width) are in percentage so that we can simply do the following to draw an overlay on the image (See example below for highlighting the text danger and science)

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

Ok so how about next?

What if we need to fit it into a viewport which has different aspect ratio? While at the same time highlighting the same thing as the original one?

Fit into a different viewport

In order to do that, we need to know

1. which part of the original image should we show, and
2. how we scale the new positions

Assumptions

• For simplicity, assume width should always be preserved; as we're fitting a 4629/10110 image to a 700/500 viewport

which part of the original image should we show

The css property background-position comes into handy. And big thanks to the article from https://dev.to/this-is-learning/all-you-need-to-know-about-background-position-3aac, which clearly explains how background-position works. If we know how it works, we could then calculate the new positions by simple maths.

TL;DR

1. we need to know the minimum y so that we can set that as the new background-position-y
2. then we need to calculate the new y' and height' after the scaling. (I'm skipping the maths here, but if you are interested, feel free to take a look at the example below)

And at last we could result in something like this ;D

Sum Up

Of course it's not perfect solution. I'm just trying to demo the css properties we can make use of when tackling a problem. There are also other handling/optimisation needed, e.g.

• what if the highlight (partially) lies outside of the viewport?
• what if some coordinates cannot fit into the viewport with x unchanged; then we need to scale x too.
• others...

Love to hear if there're other approaches towards this too!