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规则。