반응 형 CSS; 이미지가 축소되지 않고 다음 줄로 이동합니다.

Question

뷰 포트가 극히 작은 경우 (예 : 작은 화면의 세로) 응답하는 휴대 전화의 반응 형 페이지를 만들려고합니다. 나는 헤더에 3 가지 요소, 메뉴를위한 '햄버거', 로고/홈 링크 및 바스켓 아이콘을 가지고 있습니다. 사용자가 메뉴와 바구니 버튼을 사용할 수 있어야하며 뷰 포트 너비가 너무 작아 모든 콘텐츠를 수용 할 수 없으면 로고를 축소하려고합니다.

현재 너비가 축소되면 이미지가 크기가 줄어들지 않고 다음 줄로 떨어집니다.

마크 업 :

<header> 
    <div class="btn-menu"> 
    <a href="" id="menubutton"> 
     <img src="http://www.dabs.com/images/theme/mobile/dabs_com_v3/en/buttons/btn-menu3.png"> 
    </a> 
    </div> 
    <div class="btn-home"> 
    <a href="/" class="logo"> 
     <img alt="Home" src="http://www.dabs.com/images/theme/mobile/dabs_com_v3/en/layout/logo-new.png"> 
    </a> 
    </div> 
    <div class="btn-basket"> 
    <a href="/basket" id="basketbutton" class="header-button"> 
     <img alt="Basket" src="http://www.dabs.com/images/theme/mobile/dabs_com_v3/en/buttons/btn-basket2.png"> 
    </a> 
    </div> 
</header> 

CSS :

header { 
    position: relative; 
    text-align: center; 
    z-index: 10001; 
    background-color: #fff; 
    border-bottom: 8px solid #cc0033; 
    height: 48px; 
    overflow: hidden; 
    width: 100%; 
} 
header div.btn-home > a, img { 
    height: auto; 
    max-width: 100%; 
} 
div.btn-menu { 
    display: inline-block; 
    float: left; 
    width: 48px; 
} 
div.btn-home { 
    display: inline-block; 
    max-width: 199px; 
} 
div.btn-basket { 
    width: 60px; 
    display: inline-block; 
    float: right; 
    position: 
} 

, 내가 그들을 변경할 의도하지 않으려하는 BTN-메뉴와 BTN-바구니에 고정 폭 만 BTN 가정의 필요 뷰 포트 크기에 응답합니다.

예를 들어 fiddle입니다. 뷰포트 축소를 시뮬레이션하기 위해 CSS 너비 전환이있는 버튼을 추가했습니다. 프로덕션에서는 가로 및 세로를 전환 할 때 적절한 크기로 렌더링하고 변경해야합니다. 오버플로 : 숨김은 이미지가 끝나는 위치를 표시하기 위해 비활성화됩니다.

Answer 1

코드를 수정하여 약간 수정했습니다. 여기 JSFiddle의 솔루션입니다 : http://jsfiddle.net/rmdymm55/

설명 :

내가 헤더에 최대 높이를 추가하지만 난 그냥 연습에서 그것을했다, 중요하지 않습니다. 나는 이런 식으로 선언하는 선택했기 때문에

header div.btn-home > a, img { 
    height: auto; 
    max-width: 100%; 
} 

: 모두 작동해야

div.btn-home img { 
    max-width: 40%; 
    margin-left: -50px; 
} 

그러나 광산은 '적용 위치에 대한 좀 더 선택적입니다

나는 완전히이를 제거했습니다. 이미지는 <div class="btn-home"> 안에 있습니다. 어떻게 마진이 남았는지 주목하십시오 : -50px. 즉, 축소 될 때 로고는 여전히 중앙에 위치합니다. 트릭의 실제 가방은 홈 버튼이있는 곳입니다. 당신은 추가해야

position: absolute; 

및 div.btn - 메뉴 :

display: inline; /* This will keep it in one line */ 
width: auto; /* for resizing */ 
height: auto; /* for resizing */ 
position: relative; /* to keep it in place */ 

div.btn 바구니 당신은 추가해야합니다 : 당신은에 다음 .btn 가정 IMG을 할 필요가 :

position: relative; 

이렇게하면 이미지가 제대로 배치되어 겹치지 않도록 원활하게 이동하고 다음 줄로 이동하지 않습니다.