CODEWITHSUNDEEP
htmlcss
BenjaminTal
BenjaminTal

Reputation: 17

Why doesn't the input element fit inside the image?

I am trying to put 2 input elements inside an image element. I set the position of the input elements to absolute and only the left input was entered inside the image element, While the second stayed outside.

I like to know why its happening and I also need a solution for putting the right input inside the image.

.container-fluid {
  text-align: center;
  position: relative;
}

img {
  display: inline;
  max-height: 100%;
}

.myB {
  position: absolute;
  top: 50%;
}
<div class='container-fluid'>
  <input class='myB' type='button' value='<'>
  <img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="img-fluid" alt="Responsive image">
  <input class='myB' type='button' value='>'>
</div>

Upvotes: 0

Views: 59

Answers (2)

Oznerol
Oznerol

Reputation: 1

I hope this will be helpfull, basically i set the position of button, or input nevermind, with the size of image. Obviusly the "background" of button element overflows from the image, but if tou set the "position" of element with less px you'll set the arrow in the right position. Sorry for my English.. 

img{
  width:400px;
  height:300px;
}


#next,
#prev{
  position:absolute;
  top:inherit;
}

#next{
  left:400px;
}
  
      <button id="prev" type="input" > < </button>
      <button id="next" type="input" > > </button>
      <img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="img-fluid" alt="Responsive image">

Upvotes: 0

user5809739
user5809739

Reputation:

Multiple problems:

  1. Set the position of the Buttons, and dont let the browser decide to do it. Small things like that, can destroy the layouts in older/different browsers
  2. Set the container to inline-block because you dont want it to cover the whole width

.container-fluid {
      position: relative;
      display:inline-block;
      width:auto;
    }
    
    img {
      max-height: 100%;
    }
    
    .myB {
      position: absolute;
      top: 50%;
    }
    .myBRight{
      right:0px;
    }
    .myBLeft{
      left:0px;
    }
<div class='container-fluid'>
      <input class='myB myBLeft' type='button' value='<'>
      <img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="img-fluid" alt="Responsive image">
      <input class='myB myBRight' type='button' value='>'>
</div> <!-- container-fluid -->

Upvotes: 2

Related Questions