CSS: Button which scales and shifts with resizing image-CodePudding

I have an image which shows a button. I would like to place an HTML button on top of that button. It should always be there, no matter the scale or position of the image. The image is constrained by both relative width and height.

I tried

<div style="position: relative;">
    <img style="object-fit: contain; max-width: 100%; max-height: 80vh;" src="myimage.png" width="1461" height="1066"/>
    <button style="position: absolute; bottom: 10%; left: 50%; z-index: 1; width: 10%; transform: translate(-50%, 50%);">Test</button>
</div>

But because the image is constrained by the screen width, when the screen gets narrow, the button moves downwards. I.e. the button does not stay in place relative to the image, as desired.

And because the image is constrained by height, the button gets wider relative to the image when the screen gets wide.

(Also, if the screen gets wide, the button moves sideways, but I got rid of this problem by putting the enclosing div in a flex container.)

I am looking for an HTML and CSS only solution (no JavaScript).

CodePudding user response：

Would a height: 100% on the img-tag solve the Problem?

div {
  position: relative;
}

img {
  height: 100%;
  object-fit: contain;
  max-width: 100%;
  max-height: 80vh;
}

button {
  position: absolute;
  bottom: 10%;
  left: 50%;
  z-index: 1;
  width: 10%;
  transform: translate(-50%, 50%);
}

<div>
  <img src="myimage.jpg" width="1461" height="1066" />
  <button>Test</button>
</div>

CodePudding user response：

But because the image is constrained by the screen width, when the screen gets narrow, the button moves downwards. I.e. the button does not stay in place relative to the image, as desired. And because the image is constrained by height, the button gets wider relative to the image when the screen gets wide.

The percentage width you assigned to your button is what causes it to grow or shrink in width relative to the screen size - the width: 10%;. Unsetting that property will address your issue there.

As far as what you're hoping to achieve overall, I'm a bit little unclear on whether you want relative sizing or positioning or both for your button, but it sounds like you want to minimally be able to fix the button position relative to the image as it resizes. You probably want to avoid relative sizing with the button given the issues mentioned above. Just use padding and font to style the button and avoid setting the width explicitly to ensure your button accompanies your text and doesn't shrink or stretch at different screen sizes.

Right now your button is moved out of the normal flow and is only being positioned relative to your position: relative; wrapper. It doesn't know about the position and sizing of your image.

You could set the wrapper styles to reflect the behavior you generally want in your image and use this as a relative container for both your image and button. Using position: absolute; on the image and some percent vertical padding on the wrapper, you can mimic the resize behavior of your image - ex. if your image scales while maintaining a 3:2 aspect ratio the wrapper can have padding-bottom: 66.6%;.

Then, you can tweak your layout - ex. top and left etc - and sizing of both your image and button depending on how you want them to behave together relative to their shared container. Typically you want some element taking up 100% height of the relative wrapper so you aren't left with an odd gap in spacing for the surrounding elements that are in flow - ex. whatever comes after your image. This solution does depend on adjusting the relative wrapper to match your image aspect ratio, but if that's not an issue this is a common approach that may give you greater control.

Maybe the code below is closer to what you're hoping to accomplish? Here is is a fiddle link as well: https://jsfiddle.net/x7p30car/

<div style="position: relative; width: 100%; padding-bottom: 66.66%;">
  <img style="position: absolute; width: 100%; height: auto;" src="https://via.placeholder.com/450x300" width="450" height="300"/>
  <button style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; padding: 10px 20px;">Test</button>
</div>