调整标题图像的大小以适合屏幕尺寸

Question

我正在尝试获取新网站的标题图像（使用WordPress），以根据要查看的设备类型自动调整大小。我尝试从其他人的建议中实施其他CSS，但似乎对我没有任何帮助。在台式机上查看时，我对它的外观感到满意，但是从手机上查看效果并不理想。

请帮助！我的网站是：

maximizingchange.com

谢谢！

Answer 1

您是否尝试过使用：

width: 100vw;
height: auto;

这将使您的图像具有用户设备宽度的100％。

Answer 2

如果您正在使用引导程序，则在<img>中添加一个类将使图像响应。 class = "img-responsive"。您可以为此添加一个类并设置您的最大宽度。

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