Question

我正在建立一个互动网站，其中主图像是带有操作按钮的相机。我想在上面放置按钮供用户点击。我可以在全宽度下将它定位得很好，当我为手机调整较小尺寸时，相机可以很好地调整大小。另一方面，“关于”按钮从不移动或调整大小只是保持原位。

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％时，我输了图像全部在一起。

我觉得我已经尝试了所有场景，但没有一个能够奏效。对此有任何想法将不胜感激。

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

以下是最终代码：

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

同样从about_pos div中移除float，你可以在px中保持按钮的尺寸，因为你正在使用绝对div parent，about_pos进行定位。

<强>更新

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

更新2

Imgur

您可以删除#about_pos并简化操作，如下所示：

＆＃13;

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

＆＃13;

<body>
    <div class="camera">
        <div id="about">

        </div>
    </div>
</body>

＆＃13;

无法按比例更改图像大小

1 个答案: