영웅 유닛의 100 % 너비 이미지

Question

유닛의 100 %를 차지하는 .hero- 유닛 내부에 이미지를 배치하려고합니다. 즉, 전체 창 크기에 따라 확장됩니다.

지금은 거기에 있지만 이미지 오른쪽에 100px 패딩이있는 것 같습니다. 이미지를 최대 너비 : 100 %로 조정하면 크기가 커지지 않습니다.

<div class="hero-unit"> 
    <img src="images/landscape.png"> 
</div> 

사람이 오른쪽에 패딩을 제거하는 방법에 대한 아이디어를 가지고, 또한 부트 스트랩의 자동 크기 조정 기능을 유지합니까?

Answer 1

width: 100%; height: auto;은 창의 너비에 따라 컨테이너 div의 크기가 맞으면 작동합니다. 언급 한 사용으로

Answer 2

다음 선택 :

 

.hero-unit img { 
width: 100%; height: auto; 
} 
 

근무 샘플 : http://jsfiddle.net/basarat/MgcDU/2145/이

Answer 3

당신은 다음과 같은 작업을 수행 할 수

이

여기에 하나 jsfiddle의 http://jsfiddle.net/shail/5YD2J/1/

<div class="container"> 
<div class="hero-unit"> 
    <img src="http://placehold.it/1500x400"> 
</div> 
</div> 

.hero-unit { 
    padding:6px; 
    } 

당신이 필요 이미지를 좋게 보내라. 해상도, 작은 너비와 높이로 이미지 크기를 조정하면 잘못된 치수가 늘어나고 모양이 좋지 않을 것입니다.