css - 如何使用 CSS 仅显示图像的顶部？

Question

如果图像高于 115 像素，我只想在方形容器中显示顶部 115 像素。我正在尝试以下方法：

http://jsfiddle.net/3mRh9/

但我仍然看到整个图像。如何始终仅使用 CSS 仅显示图像的顶部？

代码：

<div>
    <div class="floated"> 
        <a class="limited">
            <img src="http://change.gov/page/-/officialportrait.jpg"/>
        </a>
    </div>
</div>


.floated {
    border: 1px solid blue;
    float: left;
}
.limited {
    width: 115px;
    height: 115px;
    overflow: hidden;
    border: 1px solid red;
}
img {
    max-width: 115px;
}

Answer 1

http://jsfiddle.net/3mRh9/1/

添加display: block到您的.limited风格。

.limited {
    width: 115px;
    height: 115px;
    overflow: hidden;
    border: 1px solid red;
    display: block;
}

<a>标签默认是内联的，内联元素不能有宽度或高度。

或者，您可以只用块级元素包装，例如 a div，而不是（小提琴）：

<div>
    <div class="floated"> 
        <div class="limited">
            <a href="http://example.com">
                <img src="http://change.gov/page/-/officialportrait.jpg"/>
            </a>
        </div>
    </div>
</div>

Answer 2

有一个属性允许它只显示图像的一部分。

但它只clip适用于绝对定位的对象。

JSFiddle 演示。

HTML

<div>
    <div class="floated"> 
        <a class="limited">
            <img src="http://change.gov/page/-/officialportrait.jpg"/>
        </a>
    </div>
</div>

CSS

.floated {
    border: 1px solid blue;
    float: left;
}
.limited {
    width: 115px;
    height: 115px;
    display:block;
    border: 1px solid red;
    position:relative;
}

img {
    position:absolute;
    clip:rect(0px,115px,115px,0px);

}

我不确定这是否是您所追求的效果，但这是您所要求的。