Question

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

我的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;
    }
}

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

Answer 2

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

object-fit:cover;

如何使图像响应所有设备

2 个答案: