Resize Logo Image - Mobile Version

Question

我是一名初學者，爲一個班級任務工作，我已經成功創建了該標誌並將其放置在左上角（在您的幫助下！），但我注意到在移動版本上，標誌變得越來越模糊（請看照片！）。我想保持它在網頁頂部很小，但我不知道如何！

這是鏈接，我的網站：http://gabrielr.sgedu.site/final-project/

任何幫助，請] 1

Answer 1

圖像寫入大小...

h1.site-header__title img { 
     width: 92px; 
    } 

Answer 2

你的元素h1.site-header__title是display: inline-block如果寬度是55em或更大。當小於這個值時，它默認返回到display: block，這使得它佔據全部寬度。那麼你有所有img標籤與width: 100%這意味着即使圖像小於父元素的全寬度，它仍然會擴大它，從而導致您的像素化。

一般來說，只需保留圖像的max-width: 100%即可，以防止意想不到的像素化。

特別是對於你的問題的另一個解決方案，如果你不想改變這種規則，將是限制無論是IMG或h1.site-header__title的最大寬度，與無論是width或max-width規則。