CSS: Wie ein Bild von der Mitte statt oben links

maßstabs

Also mein Problem ist, dass ich ein Bild haben, und ich setzen Sie seine CSS haben eineCSS: Wie ein Bild von der Mitte statt oben links

max-width: 100%

, die es bei niedrigeren Auflösungen skaliert (wie wird in der Geige unten zu sehen sein). Ich möchte, dass der Übergang von der Mitte des Bildes aus wirkt.

Derzeit; und von dem, was ich von den meisten Übergängen gesehen habe, die ich mit Maßstab gemacht habe, erweitern sie sich von der oberen linken Ecke.

hier ist meine Geige: http://jsfiddle.net/Eolis/3ya98xh8/3/

Quelle

2015-02-25 Eolis

möglich Duplikat [Expand div von der Mitte statt nur oben und links mit CSS] (http://stackoverflow.com/questions/8451909/expand-div-from-the-middle-instead-of-just-top- und-left-using-css) – George

Ersetzen Sie einfach width: 400px; mit transform: scale(2,2) auf :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>

Quelle

2015-02-25 18:09:49

Wie funktioniert es mit Border-Radius? – lyhong

@lyhong überprüfen Sie diese Alternative für Grenzradius https://jsfiddle.net/gg9aqjtd/ –

Fügen Sie diese auf dem div:hover:

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

Hier ist die Fiddle: http://jsfiddle.net/3ya98xh8/4/

Quelle

2015-02-25 18:11:32

oh ich sehe. das ist ganz nett. nicht perfekt, aber es könnte mit entsprechenden% -Werten perfektioniert werden. Vielen Dank! Dies gab mir auch eine Idee, Ränder zu verwenden, und ich habe meine Geige mit einer anderen Methode aktualisiert: http://jsfiddle.net/Eolis/3ya98xh8/5/ – Eolis

Es hätte perfekt sein sollen, aber ich weiß nicht, warum es ein bisschen verschiebt . –

Hier ist ein besserer Weg: http://jsfiddle.net/3ya98xh8/6/. Hier müssen Sie keine fest codierten Werte verwenden. –

und kann meine Lösung bei erbrechen es ist hilfreich für jeden :

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

Quelle

2015-02-25 18:22:44 Eolis

Hier ist ein besserer Weg: http://jsfiddle.net/3ya98xh8/6. Hier müssen Sie keine fest codierten Werte verwenden. –

CSS: Wie ein Bild von der Mitte statt oben links

Antwort

Verwandte Themen