how to place a button on a specific image point, the image being displayed as object-fit:cover

Question

So I need to have this image with a ratio lets say 2880x1520 on 100vh.

I can do that using object-fit:cover; object-position: center left;

It works fine.

The problem is that I also have to place buttons on specific parts of the image and the image is of course resizing depending on the browser ratio.

So I'm having a hard time to figure out what would be the rules for the button to follow the image resizing that object-fit:cover implies, so the button would be always on top of that specific image part and follow the image resize.

It's probably a combination of vh and vw but I can't really figure out what would be the exact rule here.

Thanks in advance for you ideas!

Answer 1

Instead of doing this, I would set the image as the background of the div and then use flexbox to position the button.

HTML

<section class="main">
<button>Random button</button>
</section>

CSS

.main
{
width: 100vw;
height: 100vh;
background: url("https://res.surplex.com/images/c_fit,d_no_image.png,f_auto,fl_progressive,h_1920,q_auto,w_1920/i_05015637/AINGERSOLL_RAND_Kompresszor.jpg");
display: flex;
justify-content: center;
align-items: center;
}

The method you want to do it with is also possible like this. Setting position absolute to the image and the button and then use flexbox to position the button to the middle.

HTML

<section class="main">
   <img src="https://res.surplex.com/images/c_fit,d_no_image.png,f_auto,fl_progressive,h_1920,q_auto,w_1920/i_05015637/AINGERSOLL_RAND_Kompresszor.jpg" alt="">
<button>Random button</button>
</section>

CSS

.main
{
width: 100vw;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

button
{
position: absolute;
 display: flex
}

img
{
width: 100%;
 height: 100%;
 position: absolute;
 object-fit: cover;
 }

If you do not want the button to be on the middle, which is not quite clear from your post, you can use different flex alignment options and then left: vw; (viewport-width) or top: vh; (viewport-height) to further align your button.

Answer 2

For this you will need to add some javascript as well to calculate wether the container's aspect ratio is wider or narrower than the image's aspect ratio.

window.addEventListener("resize", moveButtons);

imageRatio = 2880/1520;
let container = document.getElementById("container");
let  button1 = document.getElementById("button1");

function moveButtons() {
  containerRatio = container.clientWidth / container.clientHeight;

  if (imageRatio <= containerRatio) {
    // the container is wider than the image - top and bottom are cut off
    button1.style.height = (staticHeight * imageRatio / containerRatio)+ "vh";
  } else {
    // the container is narrower than the image - left and right sides are cut off
    button1.style.left = (staticWidth * imageRatio / containerRatio)+ "vw";
  }
}

This is under assumption that image is centered and position of buttons is set to absolute. It might require some fine tuning and maybe adding dimensions of button in equation or switching ratios, but basically this is it.

Good luck and let us know how it went!