트위터 부트 스트랩을 사용하여 크기 조정이 가능한 이미지

Question

트위터의 프레임 워크를 사용하여 내 사이트를 개발하고 있으며 브라우저 크기가 줄어들어 이미지의 크기를 조정하고 싶습니다. 나는 혼란 모든 노력을하지만 해결책은 여기에 이미지를 수 있도록 설계되었습니다

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

Answer 1

트위터 부트 스트랩 내 구조와 오지 수 있어요 (및 레이아웃) 즉, 콘텐츠의 이미지입니다.

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

CSS에서 배경 이미지로 사용한 이미지가 아닙니다.

Answer 2

당신은

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

를 사용해야하지만 반응 디자인을 원하는 경우, 픽셀, 사용 %를 피하려고합니다. 배경이 사진 (예 : 사진, 그림)이 아닌 배경 종류의 이미지 인 경우 <img>을 대신 사용하십시오.