html - 如何让图像出现在标题中，当屏幕足够宽时完全调整大小但当屏幕太薄时居中？

Question

我在网站的标题中使用了一张图片，而在计算机上，该图片按预期占据了整个宽度。但是，当网站在移动设备上显示时，它会缩小并仅显示图像的最左侧。

.backimage {
padding:20px;
background-image:url(background.jpeg);
width:100%;
height:35%;
background-repeat:no-repeat;
background-size:cover;
}

当整个图像的宽度太小时，我可以添加一些代码来使图像居中吗？谢谢，如果需要更多信息，我会提供。

Answer 1

使用@mediaquery

  @media only screen and (max-width: 600px) {
    .backimage {
       padding:20px;
       background-image:url(background.jpeg);
       width:50%;
       height:35%;
       margin-left: 0px;
       background-repeat:no-repeat;
       background-size:cover;
    }
  }

如果浏览器窗口为 600 像素或更小，则图像宽度将为 50%。

如果你想要不同尺寸的不同样式，你可以使用

  @media only screen and (max-width: 900px) {
    .backimage {
       padding:20px;
       background-image:url(background.jpeg);
       width:70%;
       height:35%;
       margin-left: 0px;
       background-repeat:no-repeat;
       background-size:cover;
    }
  }

如果浏览器窗口为 900 像素或更小，则图像宽度将为 70%。