본문 바로가기

IT Tools/Github

[Github/Markdown] 깃허브(Github) & 마크다운(Markdown) 에 적용되는 이미지 크기 조절 (resize) 방법 및 가운데 정렬 법

Markdown 으로 README.md 파일을 작성할 때,

이미지를 style 속성으로 zoom 48% 이런식으로 줬을 때,

github 에서는 이미지 크기 조절 설정이 전혀 적용이 되지 않길래

이 부분에 대한 방법을 포스팅 하고자 하였습니다.

또한 이미지를 이쁘게 가운데로 정렬하는 방법도 적어봤습니다.


드라마 킹덤(Kingdom) 의 사진을 예시로 진행해보겠습니다.

일단, 이미지 태그로 style 속성과 함께 zoom 을 해주겠습니다.

<img src="./images/킹덤.jpg" alt="kingdom" style="zoom:67%;" />

마크다운 자체에서는 크기 조절이 적용이 됐지만, 

깃허브에 올리면? 적용이 안된채로 나타납니다.

<img src="./images/킹덤.jpg" alt="kingdom" width="50%" height="50%"/>

그래서, style 속성이 아니라 width, height 속성으로 줬더니?

됐습니다.

결국 이미지 태그에 width, height 속성을 주면 됩니다 ! ^^


추가적으로 이미지를 가운데 정렬 하고 싶다면?

p 태그에 center 정렬 속성 줘서 추가하면 됩니다.

<p align="center">
	<img src="./images/킹덤.jpg" alt="kingdom" width="50%" height="50%"/>
</p>

 

반응형