Question

我正在尝试将图像放置在屏幕的特定位置，而窗口由用户调整大小时，图像会自动重新调整到该位置。

如果窗口是某个尺寸，我有代码可以执行此操作，但是它只能与我输入的尺寸一起使用，因此我需要在用户调整窗口大小时重新定位它

<img class = "center" src="pictures/m.jpg" alt="Image_wallpaper">

@media only screen and (min-width:960px){
    /* styles for browsers larger than 960px; */
    .center{
        margin-left: auto;
        margin-right: auto;
        top: 150px;
        right: 180px;
        margin-bottom: auto;
        margin-top: auto;
        width: 700px;
        height: 400px;
        position: fixed;
    }
}
@media only screen and (min-width:1440px){
    /* styles for browsers larger than 1440px; */
        .center{
        margin-left: auto;
        margin-right: auto;
        top: 150px;
        right: 420px;
        margin-bottom: auto;
        margin-top: auto;
        width: 700px;
        height: 400px;
        position: fixed;
    }

}

how I don't want it to look

how I want it to look

Answer 1

您可以使用转换：

@media only screen and (min-width:960px){
/* styles for browsers larger than 960px; */
  .center{
    width: 700px;
    height: 400px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);   
  }
}
@media only screen and (min-width:1440px){
/* styles for browsers larger than 1440px; */
    .center{   
      width: 700px;
      height: 400px;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);     
    }
}

<div class="center"> 
</div>

阅读参考文献link

在窗口调整大小时将图像放置在html / css中

1 个答案: