如果图像太高，如何扩展图像？

Question

嗯，这是我的问题。当用户点击“展开”链接时，我想展开图片。 我尝试过CSS Clip属性，但它只能用于绝对定位，而position：absolute会破坏我的设计。请帮忙。提前致谢。

Answer 1

在css中，如果您希望overflow:hidden来自未知的最终height，则可以使用max-height和transition或height。

点击可以:target或:focus进行重新验证。

这是一个目标示例：http://jsfiddle.net/nJkwq/

div {
    max-height:100px;
    transition:0.5s;
    overflow:hidden;
}
a.expand, :target a.shrink {
    display:block;
}
:target a.expand, a.shrink {
    display:none;
}

div:target {
    max-height:500px;
}

用于DEMO的HTML：

<div id="img" > 
    <a href="#img" class="expand"> CLICK to Expand</a>
    <a href="#" class="shrink">CLICK to Shrinl</a>
    <img src="http://i.stack.imgur.com/tHRKp.jpg" alt="shot"/>
</div>