绝对div内的灵活图像

Question

如何在绝对div位置内进行图像缩放。图像也是绝对图像。

以下是代码：

HTML

<div id="home" class="panel">
    <div class="content">
        <p> Welcome! </p>
        <div id="plan" class="home-design">
            <p class="bottom-plan">Learning About the requirements</p>
            <img class="top-plan" src="plan.png" 
                                   style="max-width:100%; height:auto;" />
        </div>
    </div>
</div>

CSS

html,body {
    height:100%;
}

body {
    width:100%;
    color:#000;
    text-align:center;
}

.panel {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    width:600px;
    height:100%;
    border:1px solid #ddd;
}

.content {
    width:600px;
    top:0;
    position:absolute;
    margin:auto;
    height:100%;
}

.home-design {
    width:225px;
    height:200px;
    text-align:center;
    padding-left:64px;
    float:left;
}

.home-design p {
    font-weight:bold;
    margin-top:80px;
    font-size:10px;
}

#plan .top-plan {
    position:absolute;
    left:65px;
    top:30px;
    border:1px solid #ddd;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}

#plan img.top-plan:hover {
    opacity:0;
    padding-top:50px;
}

文本位于图像后面，当用户将鼠标悬停在图像上时，它会淡出并向下移动。我使图像绝对，以便它可以在文本的顶部。

这是图像。

这是一个jsfiddle http://jsfiddle.net/endl3ss/guKS4/1/

修改

调整窗口大小或显示器的分辨率很小时。计划图像也应调整大小。

Answer 1

很难确切知道自己的目标，所以根据你真正想要的东西，你可以查看scale() transform-function：

#plan img.top-plan:hover {
    opacity: 0;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    transform: scale(2);
}

http://jsfiddle.net/guKS4/2/

或者，如果您想移动它，只需为top值或margin-top甚至translateY() transform-function设置动画。

---

修改

我从你的评论中意识到，你所谈论的那种扩展将无法通过scale()函数来解决。为了让内容框缩放到窗口的宽度，您需要从包含的框中删除静态宽度（例如width: 600px）

查看我删除宽度的http://jsfiddle.net/guKS4/4（以及其他一些不相关的CSS）。这将允许图像上的max-width生效，而不会溢出视口。