如何为移动设备调整标题图像的大小答案

【问题标题】：How to size header image for mobile device如何为移动设备调整标题图像的大小
【发布时间】：2014-09-01 01:32:06
【问题描述】：

我希望适当调整标题图像的大小，以便在我的 Iphone 等移动设备中查看时它适合屏幕。

网址是www.maxim-industries.com

对此的任何帮助将不胜感激。如果有人可以向我展示正确的 css，我会将其添加到我的笔记本中以供将来参考。

谢谢，

克里斯

【问题讨论】：

什么是标题图片？大拖拉机？
是的，屏幕上方的白色大车。

标签： css image mobile web

【解决方案1】：

克里斯，

使用@media 规则，以便网站根据不同的设备和大小进行调整。使用 min-device-width 和 max-device-width 以及 height 来更具体地缩小范围。当然，您还需要查看不同型号的 iPhone 的尺寸。

Apple - iPhone Compare

此外，您必须在@media 规则中根据需要缩小图像大小。从您使用 SquareSpace 的事实来看，ADMIN 部分的某处可能有一个面板，您可以在其中更改样式表。

请注意，下次您的问题可能会被标记和否决，因为您似乎还没有进行研究或记录您为完成这项工作所做的尝试。这是臭名昭著的链接——我也经历过同样的过程。How to Ask Good Questions on StackOverflow

【讨论】：

【解决方案2】：

您似乎有各种不必要的标记。除此之外，您只需要提供图像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;
}

【讨论】：