Button not staying fixed when resizing window with the image-CodePudding

I have an image that gets resized/rescaled when I scale the window. I am now adding a button to it. I want the button's position to be fixed onto the image when I resize the window.

Maybe I am doing it completely wrong with the button. What is the right way to position the button that stays fixed to the image while resizing?

html,
body {
  background-color: #000028;
  height: 100%;
  margin: 0;
  padding: 0;
}

img {
  padding: 0;
  display: block;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;
}

.button {
  position: fixed;
  left: 100vh;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 10%;
  width: 10%;
  overflow: hidden;
  z-index: 2;
  display: block;
}

<img src="https://images.unsplash.com/photo-1606228281437-dc226988dc3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" />

<input type="image"  src="https://i.picsum.photos/id/95/200/300.jpg?hmac=XW2T1mpTuATtTLyDvkvdQqgh2nodO9Zudo3dH2aXCBA" alt="submit" />

CodePudding user response：

I would add a container div around the two elements. Give that container div a position: relative; and set it's width and height. Now they both will correspond to their parent and scale properly.

Remove the style="left: 100vh" from the button. Remove the bottom: 0;

Give the img a width and height of 100%;

Change the top: 0; to top: 50%; and add Translate-Y: (-50%);

Also I would recommend to give the img the object-fit: cover; and object-position: center; so it doesn't stretch the image.

See how I did that in the code snippet.

html,
body {
  background-color: #000028;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container{
  position: relative;
  width: 100%;
  height: 100%;
}

img {
  padding: 0;
  display: block;
  margin: 0 auto;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.button {
  position: fixed;
  top: 50%;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
  height: 10%;
  width: 10%;
  overflow: hidden;
  z-index: 2;
  display: block;
}

<div >

  <img src="https://images.unsplash.com/photo-1606228281437-dc226988dc3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" />

  <input type="image"  src="https://i.picsum.photos/id/95/200/300.jpg?hmac=XW2T1mpTuATtTLyDvkvdQqgh2nodO9Zudo3dH2aXCBA" alt="submit" />
  
</div>

CodePudding user response：

While you can use the body element as a container, it would be simpler and more explicit to give your image and input their own container that's detached from the body's full height. Then you can position absolutely instead.

html,
body {
  background-color: #000028;
  height: 100%;
  margin: 0;
  padding: 0;
}

.box {
  position: relative;
  /* needed for child element positioning */
  max-width: 100%;
  max-height: 100vh;
}

.box img {
  max-width: 100%;
  max-height: 100%;
}

.box .button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* shift the input up half its height */
  right: 20px;
  height: 10%;
  width: 10%;
}

<div >
  <img src="https://images.unsplash.com/photo-1606228281437-dc226988dc3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" />

  <input type="image"  src="https://i.picsum.photos/id/95/200/300.jpg?hmac=XW2T1mpTuATtTLyDvkvdQqgh2nodO9Zudo3dH2aXCBA" alt="submit" />
</div>

CodePudding user response：

You need to remove style="left: 100vh", right: 0 and top 0 from the button then your button will be fixed at top 0.

Now you can add right: 20px to keep button at the top-right corner.

Now since you need to keep it relative to image, just code the image with div and make the div relative since you image is 100% so it will cover entire with space.

Now make your button as absolute instead of fixed, it will move according to the image as required.

Updated HTML:

<div >
  <img src="" />
  <input type="image"  src="" alt="submit" style="" />
</div>

Updated CSS:

.box {
  position: relative;
}

img {
  padding: 0;
  display: block;
  margin: 0 auto;
  height: 100%;
  width: 100%;
}

.button {
  position: absolute;
  bottom: 0;
  right: 20px;
  height: 10%;
  width: 10%;
  overflow: hidden;
  z-index: 2;
  display: block;
}

You can also add width and height to .box if you want to restrict image size.

CodePudding user response：

Because images cannot have children, I used a wrapper to contain the image and the button. With the wrapper having the same aspect-ratio as the image (3/2), and the image filling the wrapper fully (width: 100%, stretches along y-axis), we guarantee that the wrapper and image will always have the same undistorted size.

Now that we have a parent element of the size of the image, we can position the button relative to the parent (indirectly relative to the image, which is what we want).

Setting the maximum size to the viewport size, we guarantee that the image (wrapper) will always perfectly fit inside the viewport.

Example:

/* Positioning */
#img-wrapper>.button {
  top: 50%;
  right: 10%;
  translate: 0 -50%;
}

/* Image wrapper */
#img-wrapper {
  position: relative;
  aspect-ratio: 3/2;
  margin-inline: auto;
  max-width: 100vw;
  max-height: 100vh;
}
#img-wrapper>.button {
  position: absolute;
  width: 10%;
  height: 10%;
}
#img-wrapper>img {
  width: 100%;
  display: block;
}

/* Styling */
body {
  margin: 0;
  background-color: #000028;
}

<div id="img-wrapper">
  <img src="https://images.unsplash.com/photo-1606228281437-dc226988dc3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80">
  <input type="image"  src="https://i.picsum.photos/id/95/200/300.jpg?hmac=XW2T1mpTuATtTLyDvkvdQqgh2nodO9Zudo3dH2aXCBA" alt="Submit">
</div>