Search code examples
cssimageimage-resizing

Unable to change image size proportionally

I am building an interactive website where the main image is a camera with buttons to operate it. I want to place buttons on it for the user to click on. I am able to position it just fine at full width, and when I resize smaller for a phone the camera resizes beautifully. On the other hand, the About button never moves or resizes it just stays in place.

HTML:

<div class="camera">
  <div id="about_pos">
     <div id="about">

     </div>
 </div>
</div>

CSS:

.camera {
position: relative;
width: 100%;
height: 100%;
background-image: url('../images/camera.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

#about {
  display: block;
  width: 55px;
  height: 55px;
  background-image: url('../images/about_bw.png');
  background-repeat: no-repeat;
}

#about:hover {
  background-image: url('../images/about.png');
}

#about_pos{
    float: left;
    padding-left: 128px;
    padding-top: 77px;
}

From what I have seen on the internet it appears that my mistake is forcing the button to a specific height and width, but that is where the real problem comes in. When I try setting them to either auto or 100% I lose the image all together.

I feel like I have tried every scenario out there and none of them work. Any thoughts on this would be greatly appreciated.

I marked the below as the answer but the rest of the answer is found at bottom in the comments section.

Here is the final code:

HTML

     <div class="camera">
       <div class="buttons" id="about">

       </div>
    </div>

CSS 

.camera {
position: relative;
width: 100%;
height: 100%;
background-image: url('images/camera_with_buttons.png');
background-repeat: no-repeat;
background-size: 90%;
background-position: center top;
}

.buttons{
display: block;
width: 4vw;
height: 4vw;
margin-left: 1vw;
margin-top: 1vw;

border-radius: 50%;
position: absolute;
}

#about {
top: 5.6vw;
left: 6.2vw;
}

#about:hover {
background-size: cover;
background-image: url('images/about.png');
background-repeat: no-repeat;
}
Solution

  • Make use of relative positioning that you already have on .camera and add position: absolute on #about_pos. Use percentages or viewport units (vh and vw) to position it (eg. top: 30% or if the button's vertical position is relative to the width of .camera you can use top: 25vw).

    Also remove float from the about_pos div and you can keep the dimensions of a button in px since you are doing positioning with absolute div parent, about_pos.

    Update

    In order to resize the button in response to changing screen width, use width: 7vw; height: 3vw; or similar

    Update 2

    Imgur

    You can remove #about_pos and do it simpler, like this:

    body {
    padding: 0;
    margin: 0;
}

.camera {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('http://www.kenrockwell.com/nikon/d800/d800-back-1200.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
}

#about {
    display: block;
    width: 8vw;
    height: 8vw;
    margin-left: -4vw;
    margin-top: -4vw;
    border-radius: 50%;
    background: orange;
    position: absolute;
    top: 23.5vw;
    left: 71.6vw;
    opacity: 0.7;
    cursor: pointer;
}

#about:hover {
    background: yellow;
}
    <body>
    <div class="camera">
        <div id="about">

        </div>
    </div>
</body>