无法按比例更改图像大小

Question

我正在构建一个交互式网站，其中的主要图像是带有按钮的相机。我想在上面放置按钮供用户点击。我可以在全宽下很好地定位它，当我将 phone 的尺寸调整得更小时，相机的尺寸调整得非常漂亮。另一方面，关于按钮永远不会移动或调整大小，它只是停留在原地。

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;
}

从我在互联网上看到的情况来看，我的错误似乎是将按钮强制设置为特定的高度和宽度，但这才是真正的问题所在。当我尝试将它们设置为自动或 100% 时我一起失去了形象。

我觉得我已经尝试了所有方案，并且 none 可行。对此有任何想法将不胜感激。

我将以下标记为答案，但其余答案位于评论部分的底部。

这是最终代码：

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;
}

Answer 1

利用您在 .camera 上已有的相对定位并在 #about_pos 上添加 position: absolute。使用百分比或视口单位（vh 和 vw）来定位它（例如 top: 30% 或者如果按钮的垂直位置是相对于 .camera 的宽度，您可以使用 top: 25vw）。

同时从 about_pos div 中删除浮动，您可以将按钮的尺寸保持在 px 中，因为您正在使用绝对 div 父级 about_pos 进行定位.

更新

为了根据屏幕宽度的变化调整按钮的大小，请使用 width: 7vw; height: 3vw; 或类似的

更新 2

您可以删除#about_pos 并做得更简单，像这样：

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>

无法按比例更改图像大小

Unable to change image size proportionally

css

image

image-resizing