调整div内的固定图像大小

时间:2015-04-10 12:10:21

标签: html css

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

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

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

第一名:

enter image description here

第二名:

enter image description here

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用于所有内容,但我想尝试使用%,因为我听说它可能更适合移动设备。

2 个答案:

答案 0 :(得分:2)

这是你要找的吗? 的 JSFIDDLE

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

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

答案 1 :(得分:1)

尝试为类图像添加%的宽度:

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

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