Гибкое изображение внутри абсолютного деления

Как я могу сделать масштаб изображения внутри позиции абсолютного 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/

РЕДАКТИРОВАТЬ

При изменении размера окна или небольшого разрешения монитора. образ плана также должен изменяться.