在CSS中顯示元素的一半

Question

所以我只希望顯示一個元素的一半。 現在，我可以執行以下操作：

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
};

但這只是在DOM中添加多余的項目，如果在某些簡單的CSS或javascript中，我可以將其設置為僅顯示（或切出）元素的一部分，則是不必要的。 那可能嗎？ 如果是這樣，怎么辦？

更新：

在所有人都試圖猜測之后， 這是一個不斷將內容附加到容器的小提琴 。 要回答我的問題，您將需要一個函數來更改要附加的特定div的css，使其僅附加指定內容的一半

Answer 1

我的意思是很難根據您提供的少量信息來猜測，但是這樣的方法應該可以工作：

.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 */
}

這將實現這種居中外觀...您可以從這里開始運行，應該給您一些選擇的想法。

Answer 2

在CSS中指定像素高度后，很容易將其剪裁掉，假設您想垂直剪裁，如果要水平剪裁，則用寬度代替：

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

看到這個jsfiddle： http : //jsfiddle.net/jrvf7/

如果您事先不知道元素的高度，則僅在元素的一半后切斷即可，將需要一些JavaScript。 查看其他提交的答案。 但是，我建議您盡量走CSS路線。

Answer 3

確切地說，您想將其切成兩半有點模糊，但是我先開始

background-size:cover;