在手機視圖中切斷徽標

Question

我對響應式設計非常陌生，請耐心等待。我建設我爸爸的網站爲他&我應用了下面的CSS代碼來標識圖像：

img.logo {max-width: 500px; width:100%; margin-left: auto; margin-right: auto; display: block;} 

時，我儘量讓我的瀏覽器更窄出現問題。圖像會縮小一點點，但隨後它會停止縮放&被切斷。你可以在本頁看到我在說什麼：http://cellphonerepairus.com/test/old/samsung.html

我在其他網站上成功地使用了max-width: width-in-px; width:100%;。我甚至添加max-height: height-in-px; height:100%;無濟於事，所以我刪除它看看是否會有所幫助。不。我的頁面上有視口元標記。有人請幫助我。謝謝！

Answer 1

由於徽標上的填充，它會導致徽標實際上具有530px的最大寬度。爲了防止這種情況，你可以使用盒大小，告訴瀏覽器包括寬度填充與border-box：

img.logo { 
    box-sizing: border-box; 
} 

還是一個calc()等式以從寬度去除填充。

img.logo { 
    width: calc(100% - 30px); 
} 

任一段代碼都能解決您的問題。

注：我通常在我的所有響應網站中使用此代碼。

* { 
    box-sizing: border-box; 
    padding: 0; 
    margin: 0; 
} 

Answer 2

它是在.logo的padding: 15px推動元件的視口寬度的外側。

您可以去除填充物，或添加box-sizing: border-box;

.logo { 
    text-align: center; 
    vertical-align: middle; 
    padding: 15px; 
    box-sizing: border-box; 
}