调整 Header 图像以适合屏幕大小

Question

我正在尝试让我的新网站（使用 WordPress）的 header 图片根据我正在查看的设备类型自动调整大小。我试图根据其他人的建议实施额外的 CSS，但似乎对我没有任何作用。在桌面上查看时，我对它的外观很满意，但从 phone 上查看时效果不佳。

请帮忙！我的网站是：

maximizingchange.com

谢谢！

Answer 1

您是否尝试过使用：

width: 100vw;
height: auto;

这将使您的图片占用户设备宽度的 100%。

Answer 2

如果您使用的是 bootstrap，那么在 <img> 中添加 class 将使图像响应。 class = "img-responsive"。您可以在此添加 class 并设置您的最大宽度。

Answer 3

根据您的代码，您正在为页眉使用背景图像。尝试在您的附加 CSS 部分中添加以下行来修复它。

@media (max-width: 991px) { 
    #masthead.header-image{
      padding: 30px 0;
      background-repeat: no-repeat;
      background-size: contain;
      background-attachment: fixed;
      background-position: initial;
    }
}

调整 Header 图像以适合屏幕大小

Resizing Header Image to Fit Screen Size

css

image

image-resizing

web