Positionierung eines Bildes mit margin-top

Question

auf dieser Seite http://lafon.atelier47.fr/domaines-interventions Ich muss das Bild mit einem Kreis mit dem Rand oben positionieren, auf einem großen Desktop ist die Positionierung in Ordnung, aber wenn der Bildschirm kleiner ist, ist die Positionierung nicht in Ordnung. Vielleicht gibt es eine Lösung mit CSS, Javascript oder Jquery?

Mein Code:

#qx-image-4919 { 
    margin-top: -25%; 
} 

Answer 1

Beste Option Hier soll mit media queries gearbeitet werden. Ich weiß nicht, in welchem ​​Stadium Sie es einsetzen möchten. Es gibt mehrere Möglichkeiten, Ihre Medienabfragen einzurichten. Versuchen Sie dies in Ihrem CSS einzufügen:

@media (max-width: 600px) { 
    #qx-image-4919 { 
    margin-top: -25%; // your position when the screen is max 600px or smaller 
    } 
} 

Answer 2

Verwenden Medienabfrage CSS-Werte ändern (in Ihrem Fall margin-top) des Bildes auf den Wert, die Sie wollen.

@media (max-width:1200px){ 

    #qx-image-4919 { 
     margin-top: -70%; 
    } 

} 

Dies wird die margin-top auf -70% für alle Geräte Bildschirme, die weniger als 1200 Pixel ändern

Lesen Sie mehr über Medien-Anfragen hier:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 3

Erster Versuch mit

!important 

Else, statt% Ihre CSS-Code ändern, versuchen Sie mit px

Wie

margin-top: -200px !important; 

---