Question

我希望正确调整标题图片的大小，以便在移动设备（如Iphone）中查看时，它适合屏幕。

网址是www.maxim-industries.com

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

谢谢，

克里斯

Answer 1

克里斯，

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

Apple - iPhone Compare

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

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

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

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

2 个答案: