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

时间:2016-08-03 18:37:48

标签: jquery html css

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

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

任何帮助请![enter image description here] 1

2 个答案:

答案 0 :(得分:2)

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

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

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

答案 1 :(得分:0)

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

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