web-dev-qa-db-ja.com

CSS：左上ではなく中央から画像を拡大縮小する方法

だから私の問題は、画像があり、CSSが

max-width: 100%

低解像度でスケーリングします（以下のフィドルで見るように）。私が望むのは、画像の中心からトランジションを有効にすることです。

現在;そして、私が行ったほとんどの遷移から見てきたように、それらは左上隅から拡大するスケールに関係しています。

ここに私のフィドルがあります： http://jsfiddle.net/Eolis/3ya98xh8/3/

cssscalecentertransition
16
Eolis

_width: 400px;_で_:hover_を transform: scale(2,2) に置き換えるだけです。

_img {
    width: 100%; max-width: 100%;
}
div {
    position: absolute; left: 20%; top: 20%;
    width: 250px;
    transition: all 2s ease-in-out;
}
div:hover {
    transform: scale(2,2)
}_
_<div>
    <a href="http://photobucket.com/images/cat" target="_blank">
        <img src="http://i583.photobucket.com/albums/ss278/campipr/coolcat.gif" border="0" alt="cat photo: cat coolcat.gif"/>
    </a>
</div>_
29
Gildas.Tambo

これをdiv:hoverに追加します：

transform: translateX(-25%) translateY(-25%);

ここにフィドルがあります： http://jsfiddle.net/3ya98xh8/4/

7
Anupam Basak

誰かに役立つ場合に備えて私のソリューションを投げることができます：

:: CSS ::

img {
    width: 100%; max-width: 100%;
}
div {
    position: absolute; left: 50%; top: 50%;
    margin-left: -125px; margin-top: -100px;
    width: 250px;
    transition: all 2s ease-in-out;
}
div:hover {
    margin-left: -200px; margin-top: -150px;
    width: 400px;
}

:: HTML ::

<div>
    <a href="http://photobucket.com/images/cat" target="_blank">
        <img src="http://i583.photobucket.com/albums/ss278/campipr/coolcat.gif" border="0" alt="cat photo: cat coolcat.gif"/>
    </a>
</div>

:: Fiddle ::http://jsfiddle.net/Eolis/3ya98xh8/5/

1
Eolis