Html 使用twitter引导程序调整图像大小

Html 使用twitter引导程序调整图像大小,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在尝试twitter的框架来开发我自己的网站,我希望我的图片能够随着浏览器大小的减小而调整大小。我很困惑,尝试了所有的方法,但都没有找到解决方案。这是我的结构 HTML <section id="intro"> <div class="row" id="ruby"> <div class="span6" id="heading"> <h1>Journey Into Ruby and Beyond&

我正在尝试twitter的框架来开发我自己的网站,我希望我的图片能够随着浏览器大小的减小而调整大小。我很困惑,尝试了所有的方法,但都没有找到解决方案。这是我的结构

HTML

<section id="intro">
      <div class="row" id="ruby">
        <div class="span6" id="heading">
          <h1>Journey Into Ruby and Beyond</h1>
          <p>A blog about my journey into ruby, my experiences and lots of fun!</p>
        </div>

        <div class="span6" id="pic" align="right">
           <p>Akash Soti<br>RoR Developer<br>@xyz company </p>
        </div>
    </section><!--/intro-->

Twitter bootstrap旨在使图像(和布局)响应,即内容中的图像:

不是您在CSS中用作背景图像的图像。

您必须使用

@media (max-width: 699px) {
#pic{
background: url(img/Akash.png);
background-repeat: no-repeat;
height: 100px;
width: 150px;
margin-left: 200px;
}
}

但如果你想要响应性强的设计,尽量避免使用像素,使用%。如果您的背景是图片(例如照片、图片),而不是背景类型的图像,请使用
,而不是使用适合背景大小的除非您确实需要使用自己的CSS,否则一切都在这里
@media (max-width: 699px) {
#pic{
background: url(img/Akash.png);
background-repeat: no-repeat;
height: 100px;
width: 150px;
margin-left: 200px;
}
}