부트 스트랩 이미지 위치 문제 .well 클래스의 절대 위치

Question

절대 위치를 .well div 안에 넣으려고합니다. 다음 CSS 형식을 사용하여 반응 형 이미지를 만들고 싶으므로 이미지 위치를 절대적으로 유지해야합니다. 당신은 내가 '상대'에 위치 속성을 변경하지 못할 볼 수 있듯이하지만 이미지 사업부의 scope.Here에서 표시가

img{ 
    position: absolute; 
    max-width: 80%; 
    top: 10%; 
    left: 10%; 
} 

.CSS HTML과 CSS

<div class="container"> 
    <div class="well"> 
     <img class="img-polaroid" src="http://testimage.png" /> 
    </div> 
</div> 

내 코드입니다. 나는 또한 높이를 추가하려고 시도했다 : 자동; 재산에... 종류 그러나 그것은 어느 쪽도 빠져 나가지 않았다.

Answer 1

왜 절대 위치 지정이 필요한지, 포함하는 요소에 대한 상대적 단위 인 백분율을 사용하고있는 것입니다. 따라서 <img> 태그가 div의 안에 있으면 그 너비 또는 높이의 백분율입니다. 즉, <div>의 높이 또는 너비의 50 %가 항상 50 %라고 가정 해 봅시다 (이것은 <div>이 유동적이라고 가정합니다).

최대 너비를 사용하는 것이 좋습니다.

미세 조정이 필요한 시나리오의 또 다른 기술은 이미지의 크기를 계산하여 페이지의 크기와 비교하는 것입니다. 이미지가 500 X 100이고 페이지 너비가 1200 픽셀 인 문서라고 가정 해 보겠습니다. 백분율을 알아내는 계산은 (500/1200) × 100 = 41.66 %입니다.

이 때문에 Bootstrap.css 파일에서 모든 너비가 백분율로 표시됩니다.

희망 사항을 설명 드리겠습니다.