如何为移动设备设置页眉图像的大小

问题描述：

我在寻找正确尺寸的页眉图像，以便在移动设备（如我的Iphone）中查看时，它适合屏幕。如何为移动设备设置页眉图像的大小

的网站地址是www.maxim-industries.com

任何帮助，将不胜感激。如果有人能告诉我正确的CSS，我会将它添加到我的笔记本中以供将来参考。

感谢，

克里斯

什么是标题图片？大拖拉机？ – Todd 2014-09-01 01:40:55

是的，朝着屏幕顶部的大型白色车辆。 – user1530535 2014-09-01 01:51:17

答

克里斯，

，以便网站调整根据不同的设备和尺寸使用@media规则。使用最小设备宽度和最大设备宽度以及高度可以更具体地缩小范围。当然，您需要了解iPhone的不同型号的尺寸。

Apple - iPhone Compare

此外，你将不得不尺寸图像下来@media规则内是必要的。根据您使用SquareSpace的情况判断，您可以在ADMIN部分的某个位置更换样式表。

请注意，下次您的问题可能会在您未完成研究或记录您尝试进行此项工作时出现标记和降级提示。这是臭名昭着的链接 - 我也经历了同样的过程。 How to Ask Good Questions on *

答

看来你有各种不必要的标记。所有这一切，你只需要给图像width: 100%;。但是由于您网站上的其他组件。这不应该如它应该 - 边距和填充物等

#siteWrapper { 
    padding-top: 95px; 
} 


@media only screen and (max-width: 640px) { 
#siteWrapper { 
    padding-top: 60px; 
} 
.header-inner { 
    padding: 5px 0; 
    display: block 
    } 
} 
#5330ee6ae4b05a2fa30d68c6 { 
display: none; 
} 

.banner-thumbnail-wrapper has-description { 
    padding: 0; 
} 
#thubnail { 
    position: relative; 
} 
#thumbnail img { 
top: 0px; 
width: 100%; 
position: relative; 
/*left: 0;*/ 
} 
.transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail-wrapper { 
/* padding: 180px 0 155px; GET RID*/ 
/* min-height: 0; GET RID */ 

} 
.clearfix:before, .clearfix:after { 
content: " "; 
display: table; 
height: 0px; 
}

如何为移动设备设置页眉图像的大小

相关推荐