Question

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

但我仍然看到整个图像。如何仅使用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>标记是内联的，内联元素的宽度或高度不能为。

或者，您可以使用块级元素（如div）换行（fiddle）：

<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 Demo.

<强> 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);

}

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

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

2 个答案: