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

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

但我仍然看到了整个画面。如何始终仅使用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;
}

.漂浮{
边框：1px纯蓝色；
浮动：左；
}
有限公司{
宽度：115px；
高度：115px；
溢出：隐藏；
边框：1px纯红；
}
img{
最大宽度：115px；
}

将

display:block

添加到

.limited

样式中

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

）：

有一个属性允许仅显示图像的一部分

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


HTML

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

我不确定这是否是您想要的效果，但这是您要求的效果。
1+这次您更快；）
<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;
    display:block;
    border: 1px solid red;
    position:relative;
}

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

}