css - 无法按比例更改图像大小

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

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

最佳答案

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

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

更新

为了响应屏幕宽度的变化调整按钮的大小，使用width: 7vw;高度:3vw; 或类似的

更新 2

Imgur

您可以删除#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>

关于css - 无法按比例更改图像大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47273068/

css - 无法按比例更改图像大小

上一篇：html - Accordion 式显示内的粘性标题

下一篇：html - 当图像悬停时显示另一个 div