更新：

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中，我可以将其设置为仅显示（或剪切）元素的一部分。那可能吗？如果是这样，怎么样？

更新：

在你们想要猜测之后，here is a fiddle不断地将内容附加到容器中。要回答我的问题，你需要有一个函数来改变被追加的特定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;

在css中显示元素的一半

更新：

3 个答案: