web-dev-qa-db-fra.com

CSS: comment redimensionner une image à partir du centre au lieu de celle située en haut à gauche

Donc, mon problème est que j’ai une image et que je règle son CSS pour avoir un 

max-width: 100%

qui l’échelle à des résolutions inférieures (comme on le verra dans le violon ci-dessous). Ce que je veux, c'est que la transition prenne effet au centre de l'image.

Actuellement; et d'après ce que j'ai vu de la plupart des transitions que j'ai effectuées, les échelles se développent à partir du coin supérieur gauche.

voici mon violon: http://jsfiddle.net/Eolis/3ya98xh8/3/

cssscalecentertransition
14
Eolis

Il suffit de remplacer width: 400px; par transform: scale(2,2) on :hover.

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>

28
Gildas.Tambo

Ajoutez ceci au div:hover:

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

Voici le violon: http://jsfiddle.net/3ya98xh8/4/

6
Anupam Basak

peut tout aussi bien jeter ma solution au cas où elle serait utile à quiconque:

:: 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