0

画像の左右を拡大しようとしています。たとえば、画像のサイズが1100pxの場合、左右の部分が拡大されます。完全な画像拡大はしたくありません。

<div class="side_left"></div>
<div class="mid_container"></div>
<div class="side_right"></div>

ここに私のコードを見ることができます：http： //jsfiddle.net/squidraj/EgHGm/

4

2 に答える 2

0

私はこれがあなたが望むことをするべきだと信じています：http：//jsfiddle.net/hLMTW/

.mid_container {
    background: url(http://www.jeffreyhomesinc.com/images/banner%202.png) -35px 0 no-repeat;
    height: 245px;
    margin: auto 35px;
    width: 1030px;
    float:left;
}

.mid_container:hover {
    background-position: 0 0;
    margin: 0;
    width: 1100px;
}

トランジションをアニメーション化する場合は、CSSアニメーションを使用できます。

.mid_container:hover {
    background-position: 0 0;
    margin: 0;
    width: 1100px;
    animation-duration: 3s;
    animation-name: slide;
}

@keyframes slide {
    from {
        background-position: -35px 0;
        margin: 0 35px;
        width: 1030px;
    }
    to {
        background-position: 0 0;
        margin: 0;
        width: 1100px;
    }
}

もちろん、ホバー効果はダウンレベルのブラウザーではまったく機能しませんが、最新バージョンのすべてのメインブラウザーでサポートされていることに注意してください。-mozおよび-webkitプレフィックスを付けて複製することで、エフェクトのサポートをいくらか拡張できます。このフィドル（http://jsfiddle.net/hLMTW/5/）には、下位互換性のプレフィックスが含まれています。

それがあなたの質問を解決するならば、答えを受け入れてください。

于 2013-03-23T00:22:07.543 に答える
0

あなたのCSSに、あなたは入れます

background-position: "center center";

。背景画像を中央に配置します

残っているのは、divを展開するだけです http://jsfiddle.net/EgHGm/1/

divを中央に配置すると、問題がないはずです。

于 2013-03-23T00:35:25.983 に答える