如何爲移動設備設置頁眉圖像的大小

Question

我在尋找正確尺寸的頁眉圖像，以便在移動設備（如我的Iphone）中查看時，它適合屏幕。

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

任何幫助，將不勝感激。如果有人能告訴我正確的CSS，我會將它添加到我的筆記本中以供將來參考。

感謝，

克里斯

Answer 1

克里斯，

，以便網站調整根據不同的設備和尺寸使用@media規則。 使用最小設備寬度和最大設備寬度以及高度可以更具體地縮小範圍。當然，您需要了解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; 
}