调整徽标图像大小 - 移动版

Question

我是初学者，正在为课堂作业工作，我已经成功创建了徽标并将其放在左上角（在你的帮助下！）但是我注意到在移动版本上，徽标变得越来越模糊（参见请图片！）。我想在主页的顶部保持非常小，但我真的不知道如何！

这是我网站的链接：http://gabrielr.sgedu.site/final-project/

任何帮助请] 1

Answer 1

如果宽度为55em或更大，则您的元素h1.site-header__title位于display: inline-block。当小于该值时，它默认返回display: block，这使得它占据整个宽度。然后，您的所有img代码都带有width: 100%，这意味着即使图片小于父元素的整个宽度，它仍然会变为静止扩展它，这会导致你的像素化。

一般情况下，保留图像的max-width: 100%以防止意外的像素化是件好事。

特别是针对您的问题的另一种解决方案，如果您不想更改该规则，则可以使用{{1}来限制img或h1.site-header__title的最大宽度或width规则。

Answer 2

为图像写入尺寸......

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