使用margin-top定位图像

Question

在此页面上http://lafon.atelier47.fr/domaines-interventions我需要使用margin-top将图像定位为圆形，在大型桌面上定位是可以的，但是当屏幕较小时，定位不正确。 也许有一个css，javascript或jquery的解决方案？

我的代码：

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

Answer 1

使用媒体查询将图片的css值（在您的情况下为margin-top）更改为您想要的任何值。

@media (max-width:1200px){

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

}

这会将所有小于1200像素的设备屏幕的margin-top更改为-70％

在此处阅读有关媒体查询的更多信息：

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

Answer 2

此处的最佳选择是与media queries合作。我不知道您希望它在哪个阶段启动。有几种方法可以设置您的媒体查询。尝试将其粘贴到CSS中：

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

Answer 3

首先尝试

!important

否则， 更改您的css代码而不是％;尝试使用px

像

margin-top: -200px !important;