图片将不会调整大小与浏览器大小

我想尝试旁边的一些文字的图像。我希望它与文本垂直居中，但向左偏移，因此它不与文本重叠。我可以做到这一点，但每当我调整我的浏览器的大小，使其更小，图像不会移动。图片将不会调整大小与浏览器大小

我试图把文本放在文本中，但每当我这样做的文本不正确居中。我还必须在图像下添加一个链接，所以我不认为这是最好的方法。

这里是我的代码的问题的JSBin：http://jsbin.com/evasix/2/ **我在jsbing中包含了我的完整代码，因为我认为某些东西可能会被另一个div类继承。

HTML：

<div class="middle"> 
    <div class="side-img"> 
     <h2>Millions of entrepreneurs, freelancers, small<br>businesses, and departments inside big<br> organizations rely on our web apps.</h2> 
     <img src="images/img-customerss.png" class="customers"> 
    </div> 
</div>

CSS：

h2 { 
    position: relative; 
    top: -30px; 
    text-align: center; 
    font-size: 45px; 
    color: #232323; 
    font-family: 'Crimson Text', serif; 
    line-height: 50px; 
} 


.customers { 
    position: relative; 
    bottom: 150px; 
    left: 425px; 
}

来源

2013-07-21 HelloWorld

我看不出有任何的代码（CSS而不是HTML），任何尺寸的图像。你为什么认为它应该？ – GolezTrol

我无法查看重新链接，但是您是否尝试过使用百分比而不是固定像素大小？ Firebug帮助很多这种类型的东西 – null

我不知道为什么链接不工作，它似乎工作正常。不，我没有为图片添加大小，因为图片的大小是我想要的。我还没有弄清百分比，你的意思是把底部/顶部PX值改成百分比？ – HelloWorld

那是因为你正在使用从边缘像素的距离。一个像素是一个固定的大小，并调整你的窗口大小不会导致它适应。尝试使用另一个度量单位，如%。

希望它有帮助。祝你好运。

来源

2013-07-21 22:23:52

尝试一些沿着这些路线

http://jsfiddle.net/TCdsK/3/

HTML：

<div id="content1"> 
     <ul class="tmo_list"> 
       <strong> 
      Commercial Buildings<br><br> 
      Shopping Centers<br><br> 
      Dumpster Pads<br><br> 
      Decks & Patio<br><br> 
      Store Fronts<br><br> 
      Restaurants<br><br> 
      Drive Ways<br><br> 
      Awnings<br><br> 
       </strong> 
      </ul> 

    </div> 

    <div id="imageCol"> 
     <div class="wrapper"> 
     <img src="http://theclassroomkit.com/images/link_icons/literacylinks/starfall-abc.gif"/> 
    </div> 

    </div> 

    <div id="content2"> 
      <strong> 
      Office Buildings<br><br> 
      Business Signs<br><br> 
      Loading Docks<br><br> 
      Rust Removal<br><br> 
      Wood Fences<br><br> 
      Gas Stations<br><br> 
      Bus Stops<br><br> 
      Homes<br><br> 
       </strong> 
      </ul> 

    </div> 

</div>

CSS：

#container { 
    width: 100%; 
    margin: 0 auto; 
} 

#content1 { 
    float: left; 
    width: 30%; 
} 

#imageCol { 
    float: left; 
    width: 40%; 
} 

#content2 { 
    float: left; 
    width: 30%; 
} 


.wrapper img { 
display: inline-block; 
max-width: 100%; 
height: auto; 
width: auto; 
}

来源

2013-07-21 22:25:20 user2580076

图片将不会调整大小与浏览器大小

回答

相关问题