调整页眉图像大小以适应屏幕大小

Question

我正在尝试获取我的新网站的标题图像(使用WordPress(，以根据我正在查看的设备类型自动调整大小。我试着根据别人的建议实现额外的CSS，但似乎对我无效。当在桌面上查看时，我对它的外观很满意，但从手机上查看并不好看。

请帮忙！我的网站是：

maximizingchange.com

谢谢！

Answer 1

根据您的代码，您将使用背景图像作为标头。尝试在您的附加CSS部分添加以下行来修复它。

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

Answer 2

您是否尝试过使用：

width: 100vw;
height: auto;

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

Answer 3

如果使用bootstrap，则在<img>中添加一个类将使图像响应。CCD_ 2。你可以在上面添加一个类，并设置你的最大宽度。