0

位置絶対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/

編集

ウィンドウのサイズを変更した場合、またはモニターの解像度が小さい場合。計画画像もサイズ変更する必要があります。

4

1 に答える 1

0

あなたが何を求めているのかを正確に知ることはかなり難しいので、本当に欲しいものに応じて、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-toptransform translateY()-functionをアニメーション化します。

編集

あなたのコメントから、あなたが話していたようなスケーリングはscale()関数では解決されないことがわかりました。コンテンツ ボックスをウィンドウの幅に合わせるには、静的な幅を削除する必要があります(含まれwidth: 600pxているボックスなどから)。

http://jsfiddle.net/guKS4/4をチェックして、幅 (およびその他の無関係な css) を削除しました。これによりmax-width、画像上の が有効になり、ビューポートからはみ出さなくなります。

于 2013-10-01T10:37:30.160 に答える