CSS: yerine merkezi bir görüntü ölçeklendirme nasıl sol üst

(ben bir görüntü var ve düşük çözünürlüklerde ölçekler birCSS: yerine merkezi bir görüntü ölçeklendirme nasıl sol üst

max-width: 100%

sahip olan CSS ayarlamak Böylece benim sorunum aşağıdaki kemanda görülecektir). İstediğim şey, geçişin görüntünün merkezinden etkili olması.

Halen; ve ölçekle ilgili yaptığım geçişlerin çoğundan gördüklerimden, sol üst köşeden genişliyorlar. http://jsfiddle.net/Eolis/3ya98xh8/3/

kaynak

2015-02-25 Eolis

olası yinelenen CSS kullanarak sadece üst ve sol yerine] (http://stackoverflow.com/questions/8451909/expand-div-from-the-middle-instead-of-just-top- ve-left-using-css) – George

Sadece :hover üzerinde transform: scale(2,2) ile width: 400px; değiştirin:

burada keman olduğunu.

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>

kaynak

2015-02-25 18:09:49

Sınır yarıçapı ile nasıl çalışır? – lyhong

@lyhong sınır yarıçapı için bu alternatifi kontrol edin https://jsfiddle.net/gg9aqjtd/ –

div:hover ekleyiniz: Burada

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

Fiddle geçerli: http://jsfiddle.net/3ya98xh8/4/

kaynak

2015-02-25 18:11:32

oh anlıyorum. bu oldukça hoş. Mükemmel değil ama uygun% değerleri ile mükemmelleştirilebilir. Teşekkürler! Bu da bana marjları kullanmak için bir Fikir verdi ve ben burada başka bir yöntem kullanarak keman güncelledi: http://jsfiddle.net/Eolis/3ya98xh8/5/ – Eolis

Mükemmel olmalıydı ama neden biraz değişiyor bilmiyorum . –

İşte daha iyi bir yol: http://jsfiddle.net/3ya98xh8/6/. Burada herhangi bir sabit kodlanmış değer kullanmanız gerekmez. –

yanı durumda benim çözüm kusmak olabilir o herkese yardımcı olur :

:: 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 :: ortasından div Expand [ait http://jsfiddle.net/Eolis/3ya98xh8/5/

kaynak

2015-02-25 18:22:44 Eolis

İşte daha iyi bir yol: http://jsfiddle.net/3ya98xh8/6. Burada herhangi bir sabit kodlanmış değer kullanmanız gerekmez. –

CSS: yerine merkezi bir görüntü ölçeklendirme nasıl sol üst

cevap

İlgili konular