html - 如何使图像响应所有设备

Question

我似乎无法让我的图片响应所有设备。标题有一个视频和一个放在视频前面的图像。当在桌面上看到时，图像很好地放置在容器的中心，但是，当调整窗口大小时查看是否响应较小的设备时，图像错位在容器下方。

它在桌面上的外观:http://imgur.com/a/VHjvg

调整大小时的外观:http://imgur.com/a/y6pVy

我的 HTML 代码:

   <!-- Header -->
        <div class="header-container">

         <div class="video-container">

            <video preload="true" autoplay="autoplay" loop="loop" volume= "0">

            <source src="video/backgroundAnime.mp4" type="video/mp4">
            <source src="video/backgroundAnime.webm" type="video/webm">
            <source src="video/backgroundAnime.ogv" type="video/ogg"> 

            </video>
            <div class="img-container">
             <img src="img/albayda.png" class="img-responsive">
            </div>
        </div>



    </div>

我的 CSS:

.header-container{

  width: 100%;
  height: 700px;
  position: relative;
  padding: 20px;
}

.video-container{
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.video{
  position: absolute;
  z-index: -1;
  width: 100%;
}
.img-responsive{

 max-width: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);

Answer 1

也许您可以使用 CSS 媒体查询解决这个问题。

当代码开始在特定像素处出错时，您可以使用以下代码:

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

有了这个，浏览器将在您希望的任何像素上以不同方式显示您的网站。只需在括号内输入您的代码。