부트 스트랩 이미지 스팬의 전체 너비

Question

이것이 가능한지 확실하지 않지만 Twitter 부트 스트랩을 사용하여 스팬 전체 너비와 높이를 채우고 싶습니다.

나는 너비가 span4이고 나머지 너비가 8 인 이미지가 있습니다.

나는 background : cover 클래스를 사용해 보았지만, 스팬의 너비 만 채울 것이고 높이를 지정할 때만 높이가 채워질 것입니다. 사전에

HTML

<div class="container-fluid"> 
<div class="row-fluid col-wrap"> 
<div class="span4 sidebar-red col"> 
<h1>About</h1> 

<p class="lead">The first of its kind in Toronto&hellip;</p> 

<p>Workplace One offers small businesses, entrepreneurs, professionals and anyone in between, a customized and unique work environment in a shared office community.</p> 

<p>Workplace One offers flexibility. With customizable offices and services, Workplace One caters to the constant evolution of a small or growing business.</p> 

<p>The unique space design encourages collaboration and provides an energy that can't be found in a home office, or other professional work environment.</p> 

</div><!--/span--> 



<div class="span8"> 
<img src="img/h_ph.jpg"/> 
</div><!--/span--> 


</div><!--/span--> 
</div><!--/row--> 

감사

JB

Answer 1

CSS 배경 이미지가 아닌 <img> 태그가있는 이미지를 사용하는 경우 부트 스트랩이 기본적으로이 작업을 수행합니다.

이미지가 당신이 그것의 100 %로 확대됩니다 마크 업에 배치 할 때 충분히 큰 경우

부모 컨테이너의 (이 경우에 .span8 컨테이너)

그래서 당신은 아마 큰 드롭 필요 이 효과를보기에 충분한 이미지, 또한 정상적인 부트 스트랩 반응 스타일 시트를 포함하는 것을 잊지 마십시오.

마지막으로 중요한 것은, 주식용 부트 스트랩 프레임 워크로 뭔가를하는 방법을 찾지 못한 경우, 자신의 코드를 추가하기 만하면 다른 스타일 시트에서 수행하고 거기에서 수정 한 내용을 추적하는 것이 좋습니다. 스타일이 제대로 캐스케이드되도록 모든 CSS의 나머지 부분에 있는지 확인하십시오.

그렇다면 부트 스트랩 CSS 파일을 직접 수정하지 마십시오. 그러면 최신 버전으로 업그레이드 할 때 고통 스러울 것입니다.

Answer 2

정확히 트위터 부트 스트랩,하지만 일에서 당신을 중지되지는 않습니다 : 분명히

.span8 img { width: 100%; height: 100%; } 

더 나은 것 .span8보다 #id 또는 더 나은 식별자를 사용하려면 usi가 될 수 있습니다. 다른 곳에서 그 사진을 찍어서 모든 이미지가 그런 것처럼 펼쳐지 길 바라지 마십시오.

편집 : 이것은 이미지를 비뚤어지게합니다. 비율을 유지하지 않으므로 이미지 높이와 너비를 강요하는 것입니다. 나는이 접근법을 직접 추천하지 않는다.