CSS: come ridimensionare l'immagine dal centro invece che in alto a sinistra

Quindi il mio problema è che ho un'immagine e ho impostato la sua CSS per avere unCSS: come ridimensionare l'immagine dal centro invece che in alto a sinistra

max-width: 100%

che scala è a risoluzioni più basse (come sarà visto nel violino qui sotto). Quello che voglio è che la transizione abbia effetto dal centro dell'immagine.

Attualmente; e da quello che ho visto dalla maggior parte delle transizioni che ho fatto coinvolgendo scale si espandono dall'angolo in alto a sinistra.

qui è il mio violino: http://jsfiddle.net/Eolis/3ya98xh8/3/

fonte

2015-02-25 Eolis

possibile duplicato del [Expand div dal mezzo invece di solo top e left usando i CSS] (http://stackoverflow.com/questions/8451909/expand-div-from-the-middle-instead-of-just-top- and-left-using-css) – George

basta sostituire width: 400px; con transform: scale(2,2) su :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>

fonte

2015-02-25 18:09:49

Come farlo funzionare con border-radius? – lyhong

@lyhong controlla questa alternativa per il raggio di confine https://jsfiddle.net/gg9aqjtd/ –

Aggiungere questo al div:hover:

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

Ecco il violino: http://jsfiddle.net/3ya98xh8/4/

fonte

2015-02-25 18:11:32

oh capisco. è abbastanza carino non perfetto ma potrebbe essere perfezionato con valori percentuali appropriati. Grazie! questo mi ha dato anche un'idea per usare i margini e ho aggiornato il mio violino usando un altro metodo qui: http://jsfiddle.net/Eolis/3ya98xh8/5/ – Eolis

Dovrebbe essere perfetto ma non so perché si sta spostando un po ' . –

Ecco un modo migliore: http://jsfiddle.net/3ya98xh8/6/. Qui non devi usare alcun valore scritto a codice. –

può anche gettare la mia soluzione in caso è utile a chiunque :

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

fonte

2015-02-25 18:22:44 Eolis

Ecco un modo migliore: http://jsfiddle.net/3ya98xh8/6. Qui non devi usare alcun valore scritto a codice. –

CSS: come ridimensionare l'immagine dal centro invece che in alto a sinistra

risposta

Problemi correlati