크기 조정 로고 이미지 - 모바일 버전

Question

나는 클래스 지정을 위해 일하는 초보자이며, 로고를 성공적으로 작성하여 왼쪽 상단에 배치했다 (도움을 받아!)하지만 모바일 버전에서는 로고 더 커지고 흐릿해진다. (그림 참조!) 나는 그것을 홈페이지의 상단에 아주 작게하고 싶습니다만, 어떻게 해야할지 모르겠습니다! 어떤 도움이 ] 이미지 1

Answer 1

쓰기 크기 ...

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

Answer 2

귀하의 요소 h1.site-header__title는 폭이 경우 display: inline-block에

제발 http://gabrielr.sgedu.site/final-project/ :

이

내 웹 사이트에 대한 링크입니다 55em 이상입니다. 그보다 작 으면 기본값이 display: block으로 다시 설정되어 전체 너비가됩니다. 그렇다면 모든 img 태그는 width: 100%입니다. 즉 이미지가 부모 요소의 전체 너비 인보다 작더라도 을 의미합니다. 픽셀이 계속 확장되므로 픽셀 화가 발생합니다.

일반적으로 의도하지 않은 픽셀 화를 방지하기 위해 이미지 용으로 max-width: 100%을 유지하는 것이 좋습니다.

해당 문제를 해결하는 다른 방법은 해당 규칙을 변경하지 않으려는 경우 img 또는 h1.site-header__title의 최대 너비를 width 또는 max-width 규칙으로 제한하는 것입니다.