그래서 요소의 절반 만 표시하고 싶습니다. 지금은 뭔가를 할 수있는 다음 :CSS의 요소 절반 표시

function half($elem,which){ 
    //here I would get the scrolling position 
    //of the element $elem along with the outer 
    //width and outer height. Then, depending on 
    //what 'which' is (left,right,top,bottom), the 
    //function would append an element with the same 
    //background color as the body background in 
    //order to cover the correct part of the element 
};

하지만를이 단지 몇 가지 간단한 CSS 나 자바 스크립트, 단순히 표시하도록 설정할 수 있으며, 경우에 불필요한 (또는 잘라 될 것 DOM에 추가 항목을 추가한다) 요소의 일부일뿐입니다. 그게 가능하니? 그렇다면 어떻게?

UPDATE : 여러분 모두가 끊임없이 용기에 내용을 추가 here is a fiddle를 추측하려고 후

. 내 질문에 대답하려면 특정 div의 CSS를 변경하여 지정된 내용의 절반 만 추가하도록 CSS의 기능을 변경해야합니다.

출처

2013-06-24 Ryan Saxe

블록 요소 인 경우 폭/높이를 계산 된 값의 절반으로 설정하고 'overflow : hidden;'을 설정할 수 있습니다. – Paulpro

그리고 나서'clip'이 있습니다 : http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ (절대적으로 배치 된 요소들에서만 작동합니다) –

동의합니다. @Paulpro가 지적했듯이, 당신은 아마 overflow : hidden과 container가 필요하다. –

소량의 정보를 기반으로 추측하기가 어렵다는 것을 의미합니다. 당신은 제공하지만,이 같은 작업을해야합니다 : 그냥 뭔가이 같은 다음

.ElementContainer { 
    width:500px; /* example, random number */ 
    overflow:hidden; /* important part */ 
} 

.Element { 
    width:200%; /* relative to parent, so double the width of parent */ 
}

그리고 : 첫 번째 절반을 표시해야합니다

<div class="ElementContainer"> 
    <img src="whatever.jpg" alt="" class="Element" /> 
</div>

을, 왼쪽에서. 해야한다, 당신이 여기에서 그것으로 실행할 수 있습니다 ...이 중심 외관의이 종류를 할 것입니다

.ElementContainer { 
    position:relative; /* must declare position of parent */ 
    width:500px; 
    height:200px; /* since child is removed from DOM, it will be 0 height unless declared explicitly */ 
    overflow:hidden; 
} 

.Element { 
    width:200%; 
    position:absolute; 
    top:0; /* always declare both X & Y */ 
    left:-25%; /* can be any negative % you want, this is just an example */ 
}

: 당신이 중간 반이나 뭐 ... 같이하고 싶은 경우에, 당신은 위치를 사용해야합니다 옵션에 대한 아이디어를 제공합니다.

출처

2013-06-24 19:57:25 PlantTheIdea

컨테이너를 사용하면 DOM을 압도하게됩니다. 이 작품을보고, 그 +1, 나는 아무 것도 나오지 않으면 그 대답을 받아 들일 것이다. 실제 요소 안에있는 것 같다. –

예, 들었어. 넌 그냥 의미가없는 HTML을 많이 가지고있다. 그 컷오프의,하지만 그 최고의 비행 중에 생각할 수 있습니다. – PlantTheIdea

-1

그것은 당신이 반으로 잘라 싶은 정확히 모호한의 종류,하지만 난 당신이 절단 할 가정

background-size:cover;

출처

2013-06-24 19:59:36

나는 그게 가능한 절반 일 수있는 방법을 이해하지 못한다 ... 스스로 설명해주십시오. –

질문이 아주 불분명했습니다.중첩 된 div의 크기를 두 배로 늘리고 background-size : 표지를 사용하면 절반으로 절단됩니다. –

그것은, CSS에서 특정 픽셀 높이 후 차단하는 것은 매우 쉽게 시작하는 것 수직, 대체 폭 당신은 수평으로 절단하려는 경우 : 돈 당신이 경우, http://jsfiddle.net/jrvf7/

가 요소의 정확히 절반 후에 꺼 절단 :

.restricted {overflow: hidden; height: 45px; }

이 jsfiddle을 참조하십시오 미리 요소의 높이를 알고, 일부 자바 스크립트가 필요합니다. 다른 제출 된 답변을 참조하십시오. 그러나 가능한 한 내 CSS 경로를 사용하는 것이 좋습니다.

출처

2013-06-24 20:00:26

CSS의 요소 절반 표시

UPDATE : 여러분 모두가 끊임없이 용기에 내용을 추가 here is a fiddle를 추측하려고 후

답변

관련 문제