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

我正在尝试使用twitter的框架来开发自己的网站，并且希望缩小浏览器大小时调整图像大小。我很困惑，并试图一切，但不能想出这里的解决方案是我的结构使用twitter-bootstrap调整大小的图像

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; 
}

来源

2012-08-08 Akash Soti

用于背景大小合适的图案 – 2012-08-08 10:40:49

除非你真的需要使用你自己的CSS，：//twitter.github.com/bootstrap/components.html#thumbnails – DaveP 2012-08-08 11:10:30

Twitter的引导的目的是使图像（和布局）响应，即图像在您的内容中：

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

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

来源

2012-08-08 13:34:47 Mark

你必须使用

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

但是如果你想响应式设计，尽量避免像素，使用％。如果你的背景是图片（例如照片，图片）而不是背景类型的图片，请使用<img>而不是

来源

2012-08-08 13:35:36 Avdept

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

回答

相关问题