使用 twitter-bootstrap 调整大小的图像答案

【问题标题】：Resizeable Image using twitter-bootstrap使用 twitter-bootstrap 调整大小的图像
【发布时间】：2012-10-11 14:01:54
【问题描述】：

我正在尝试使用 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-->

CSS

#ruby.row{

margin-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}

#pic{

background: url(img/Akash.png);
background-repeat: no-repeat;
height: 150px;
width: 200px;
margin-left: 200px;

}

#pic img{

max-width:100% ;
    max-height:100% ;
    display:block;

}

#pic p{
position: relative;
right: 110px;
margin-top: 90px;
margin-left: 0px;
text-align: left;
}

【问题讨论】：

用于背景大小的属性
除非你真的需要使用自己的CSS，都在这里twitter.github.com/bootstrap/components.html#thumbnails

标签： html css twitter-bootstrap

【解决方案1】：

Twitter 引导程序旨在使图像（和布局）具有响应性，即内容中的图像：

<img src="path/to/images.jpg" alt="some">

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

【讨论】：

【解决方案2】：

你必须使用

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

但是如果你想要响应式设计，尽量避免像素，使用 %.如果您的背景是图片（例如照片、图片）而不是背景图片，请改用<img>

【讨论】：