如何使所有设备的图像响应

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

我的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%);

}

来源

2017-02-18 EyedFox1

也许你可以用CSS媒体查询修复问题。

当代码开始错误在特定的像素可以使用下面的代码：

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

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

来源

2017-02-18 19:37:03

你可以给img标签这种风格：

object-fit:cover;

来源

2017-07-12 13:17:09

如何使所有设备的图像响应

回答

相关问题