jquery - 调整 Logo 图像大小 - 移动版

Question

我是一名正在做类作业的初学者，我已经成功创建了 Logo 并将其放置在左上角(在您的帮助下!)，但我注意到在移动版本上， Logo 变得更大且模糊(请参阅请提供图片!)。我想让它在主页顶部保持很小，但我真的不知道该怎么做!

这是我网站的链接: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%，以防止意外的像素化。

特别针对您的问题的另一个解决方案，如果您不想更改该规则，则可以限制 img 或 h1.site-header__title 的最大宽度，使用以下任一方法width 或 max-width 规则。