调整div内的固定图像大小

Question

现在，如果你在我的计算机上查看我的页面，它将看起来像我希望它的样子。现在，如果您使用分辨率更高/更低的电脑，图像将移动，但文本将保持原位，为什么？

我已经尝试过使用position:和高度/宽度百分比，但还没有设法让它正常工作。

我想让图片留在一个地方并根据分辨率调整大小。

第一名：

第二名：

HTML：

<div id="content">
    <div class="pricing">Pricing</div>
    <div><img src="images/bracket.png" class="bracket"></div>

    <div class="skills">Skills</div>
    <div><img src="images/bracket.png" class="bracket_02"></div>
</div>

CSS：

#content
{
    margin: 0% 13% auto;
    height: 100%;
    width: 65%;
    border-style: solid;
    border-width: 1px;
    color: white;
    position: absolute;
}

.pricing
{
    font-size: 40;
    font-weight: bold;
    margin-top: 6%;
    margin-left: 20%;
    color: #1eb1f5;
    position: absolute;
}

.skills
{
    font-size: 40;
    font-weight: bold;
    margin-top: 6%;
    margin-left: 70%;
    color: #1eb1f5;
    position: absolute;
}

.bracket
{
    margin-top: 11%;
    margin-left: 8%;
    position: absolute;
}

.bracket_02
{
    margin-top: 11%;
    margin-left: 57%;
    position: absolute;
}

我通常会将px用于所有内容，但我想尝试使用%，因为我听说它可能更适合移动设备。

Answer 1

这是你要找的吗？ 的 JSFIDDLE

我改变了你的css和html很多。

1. 我将文字和图片放在容器.head-elem
中
2. 将text-align: center设置为将文本置于其容器中心
3. width至{strong> 50％的.head-elem。这样它占据#content宽度的50％。
4. 使图像占据其容器宽度的完整大小：.bracket { width: 100%;}

#content { 
  width: 500px; //Change this to test out diffrent sizes
  border-style: solid;
  border-width: 1px;
  color: white;
}
.head-elem {
  width: 50%;
  text-align: center;
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  color: #1eb1f5;
}
.bracket {
  width: 100%;
}

<div id="content">
  <div class="head-elem">
    <span>Pricing</span>
    <img src="http://www.i2symbol.com/images/symbols/brackets/presentation_form_for_vertical_left_curly_bracket_uFE37_icon_256x256.png" class="bracket" />
  </div>
  <div class="head-elem">
    <span>Skills</span>
    <img src="http://www.i2symbol.com/images/symbols/brackets/presentation_form_for_vertical_left_curly_bracket_uFE37_icon_256x256.png" class="bracket" />
  </div>
</div>

Answer 2

尝试为类图像添加％的宽度：

.bracket
{
margin-top: 11%;
margin-left: 8%;
position: absolute;
width: 50%;
}

.bracket_02
{
margin-top: 11%;
margin-left: 57%;
position: absolute;
width: 50%;
}