CSS: Jak skalować obraz z centrum zamiast górnym rogu

Więc mój problem jest, że mam obraz i ustawić swój CSS miećCSS: Jak skalować obraz z centrum zamiast górnym rogu

max-width: 100%

która skaluje go w niższych rozdzielczościach (jak zobaczymy w skrzypcach poniżej). Potrzebuję przejścia, które zacznie obowiązywać ze środka obrazu.

Obecnie; i z tego, co widziałem z większości przejść, jakie zrobiłem przy użyciu skali, rozszerzają się one od lewego górnego rogu.

tu jest moje skrzypce: http://jsfiddle.net/Eolis/3ya98xh8/3/

Źródło

2015-02-25 Eolis

możliwe duplikat [Rozwiń div od środka zamiast tylko górnej i lewej strony za pomocą CSS] (http://stackoverflow.com/questions/8451909/expand-div-from-the-middle-instead-of-just-top- i-left-using-css). – George

Wystarczy zastąpić width: 400px; z transform: scale(2,2) na :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>

Źródło

2015-02-25 18:09:49

Jak sprawić, by działał z promieniem granicy? – lyhong

@lyhong sprawdź tę alternatywę dla promienia obramowania https://jsfiddle.net/gg9aqjtd/ –

Dodaj do tego div:hover:

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

Oto Fiddle: http://jsfiddle.net/3ya98xh8/4/

Źródło

2015-02-25 18:11:32

oh Widzę. to całkiem miłe. nie jest doskonały, ale można go udoskonalić za pomocą odpowiednich wartości%. dzięki! to również dało mi pomysł na wykorzystanie marginesów i zaktualizowałem swoje skrzypce za pomocą innej metody: http://jsfiddle.net/Eolis/3ya98xh8/5/ – Eolis

Powinno być perfekcyjne, ale nie wiem dlaczego przesuwa się nieco . –

Oto lepszy sposób: http://jsfiddle.net/3ya98xh8/6/. Tutaj nie musisz używać żadnych zakodowanych wartości. –

może równie dobrze wyrzucić moje rozwiązanie w przypadku jest to pomocne dla wszystkich :

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

Źródło

2015-02-25 18:22:44 Eolis

Oto lepszy sposób: http://jsfiddle.net/3ya98xh8/6. Tutaj nie musisz używać żadnych zakodowanych wartości. –

CSS: Jak skalować obraz z centrum zamiast górnym rogu

Odpowiedz

Powiązane problemy