이미지에 맞게 div 크기를 조정하는 방법은 무엇입니까?

Question

반응 형 부트 스트랩 설정에서 이미지의 일부분 위에 텍스트 상자를 만들려고합니다.

최종 목표는이 텍스트 상자를 사용자가 jQuery를 사용하여 양식에 입력 한 내용으로 업데이트 할 수 있도록하는 것입니다.

웹 사이트는 응답 성이 있어야하며 텍스트 상자가 포함 된 div이 응답하도록 조정하여 이미지의 동일한 부분과 이미지의 동일한 크기에 항상 표시되도록하는 방법을 찾으려고합니다. .

내 정확한 문제는 이것이다 :

이미지가 카드이다; 전체 화면에서 내 텍스트 상자는 카드 위에 완벽하게 앉습니다. 화면의 크기를 줄이면 텍스트 상자는 이전의 크기로 유지되고 더 이상 카드 이미지 위에 정확히 위치하지 않습니다.

도움을 주셔서 감사합니다.

Answer 1

responsive layouts using the bootstrap grid system에 대한 설명서를 읽어야합니다. grid template examples도보십시오.

관련 비트는 특정 크기의 클래스의 작동 방식을 이해 될 것이다

여기

<div class="row"> 
    <div class="col-xs-12 col-md-4">...</div> 
</div> 

, COL-XS-12 휴대 하에서 수단은 DIV 행 전체 폭을 차지한다. col-md-4 부분은 행 너비의 1/3을 차지하는 큰 매체를 나타냅니다.

Answer 2

도움 주셔서 감사합니다. @media 쿼리를 사용하여 수동으로 상자 크기를 변경했습니다.