키가 너무 큰 경우 이미지를 확장하는 방법?

-2

음, 내 문제가 있습니다. 사용자가 '펼치기'링크를 클릭하면 이미지를 펼치고 싶습니다. CSS 클립 속성을 사용해 보았습니다.하지만 절대 위치 지정에서만 작동하며 position : absolute는 내 디자인을 망칩니다. 도와주세요. 미리 감사드립니다. 당신이 알 수없는 최종 height에서 transition를 원할 경우 CSS에서 키가 너무 큰 경우 이미지를 확장하는 방법?

출처

2014-04-29 user3362165

적어도'오버 플로우과 같습니다 hidden'이 경우에 도움이 될 수 있습니다 : –

을 왕으로 동의 왕. 오버플로가 숨겨진 컨테이너를 생성하고 클릭시 컨테이너의 크기를 조절하십시오. –

말하듯이'position : absolute'를 사용하십시오. 그러나'position : relative' 인 무언가 안에 넣으십시오. 더 이상 "디자인을 망칠"수 없습니다. – Archer

Like this 당신은 overflow:hidden 및 height 또는 max-height를 사용할 수 있습니다.

:target 또는 :focus으로 다시 확인하십시오. DEMO에 사용 http://jsfiddle.net/nJkwq/

div { 
    max-height:100px; 
    transition:0.5s; 
    overflow:hidden; 
} 
a.expand, :target a.shrink { 
    display:block; 
} 
:target a.expand, a.shrink { 
    display:none; 
} 

div:target { 
    max-height:500px; 
}

HTML : 여기

대상에 예를

는

<div id="img" > 
    <a href="#img" class="expand"> CLICK to Expand</a> 
    <a href="#" class="shrink">CLICK to Shrinl</a> 
    <img src="http://i.stack.imgur.com/tHRKp.jpg" alt="shot"/> 
</div>

출처

2014-04-29 14:47:17

키가 너무 큰 경우 이미지를 확장하는 방법?

답변

관련 문제