GitHub README.md에서 이미지를 나란히 표시하려면 어떻게해야합니까?


164

내 README.md에서 두 사진을 비교하여 표시하려고합니다. 따라서 나란히 표시하고 싶습니다. 두 이미지가 현재 배치되는 방법은 다음과 같습니다 . 위와 아래가 아닌 두 개의 태양열 색 구성표를 나란히 표시하고 싶습니다. 도움을 주시면 감사하겠습니다.


: 나는 마크 업 직접 작성하지 않고 추가 할 수 있습니다 작은 웹 도구 및 정렬 이미지를 만들어 stackoverflow.com/a/32790440/2477619
B12Toaster

1
질문에서 링크가 작동하지 않습니다
발렌타인 Zakharenko에게

답변:


270

이 문제를 해결하는 가장 쉬운 방법 은 GitHub의 풍미 마크 다운에 포함 된 테이블을 사용하는 것입니다 .

구체적인 예를 들면 다음과 같습니다.

Solarized dark             |  Solarized Ocean
:-------------------------:|:-------------------------:
![](https://...Dark.png)  |  ![](https://...Ocean.png)

머리글로 Solarized Dark 및 Ocean이 포함 된 테이블을 만든 다음 첫 번째 행의 이미지를 포함합니다. 분명히 당신은 ...실제 링크로 바꿀 것 입니다. :들 (그들은 단지이 경우에는 좀 필요가 세포에있는 내용을 중심으로) 선택 사항입니다. 또한 이미지를 더 작게 나란히 표시하도록 크기를 줄이려고 할 수 있습니다.


8
![](https://...Ocean.png)이 대괄호 사이에 이미지 위에 마우스를 올릴 때 표시되는 대체 텍스트를 추가 할 수 있습니다.
Adi

이 솔루션은 github의 동일한 라인에 더 많은 이미지를 넣고 싶을 때 더 좋습니다. 나는이 솔루션과 동일한 라인에 4를 넣었지만 가발 솔루션은 3 만했습니다.
vinzee

훌륭한! Bitbucket 과도 호환됩니다. (글쎄요, 적어도 풀 요청 화면에서 작동한다고 보증 할 수 있습니다.)
Nate Cook

1
너무 나쁘면 이미지 주위에 테두리가 생깁니다.
유목민

1
@EpicDavi : 코드의 맥락에서 테이블 내의 이미지를 어떻게 축소합니까?
emagar

115

각 이미지의 마크 다운을 같은 줄에 작성하여 각 이미지를 나란히 배치 할 수 있습니다.

![alt-text-1](image1.png "title-1") ![alt-text-2](image2.png "title-2")

이미지가 너무 크지 않은 한, GitHub의 README 파일의 스크린 샷에서 보여주는 것처럼 인라인으로 표시됩니다.

인라인 이미지


나를 위해 제대로 작동하지 않습니다. (상대) 이미지 중 하나는 GIF입니다
Ridhwaan Shakeel

@RidhwaanShakeel 이미지가 gif인지 여부는 중요하지 않습니다. 이 방법으로 두 개의 gif를 나란히 배치했습니다.
Socowi

gif 파일에는 작동하지 않았습니다.
uguros

105

이미지가 너무 넓지 않으면 3 개의 이미지가 나란히 표시됩니다.

<p float="left">
  <img src="/img1.png" width="100" />
  <img src="/img2.png" width="100" /> 
  <img src="/img3.png" width="100" />
</p>

2
훌륭하고 솔직한 솔루션은 더 많은 투표를해야합니다.
NikxDa

10
그렇습니다. 더 많은 투표를해야합니다! <p align="middle">이미지를 중앙에 정렬하는 데 사용 했습니다.
Reza Dodge

각 이미지에 제목을 추가 할 수 있습니까?
I_told_you_so

이것은 완벽 해요! 이미지의 크기를 지정할 수 있습니다.
Kaushal28

1
예를 들어 width="32%"3 개의 이미지를 정렬 할 때 이미지를 전체 너비의 백분율로 지정하는 것을 선호합니다.
Igor Fobia

37

다른 예제와 비슷하지만 html 크기를 사용하면 다음을 사용합니다.

<img src="image1.png" width="425"/> <img src="image2.png" width="425"/> 

여기에 예가 있습니다

<img src="https://openclipart.org/image/2400px/svg_to_png/28580/kablam-Number-Animals-1.png" width="200"/> <img src="https://openclipart.org/download/71101/two.svg" width="300"/>

나는 이것을 Remarkable 사용하여 테스트했습니다 .


4
<img height="350" hspace="20"/>문제의 이미지 사이를 구분자로 사용 했습니다 ( 흔들기의 대답이 효과 가 없었습니다).
EmmanuelMess

놀라운 놀라운 md 편집기입니다. 감사합니다.
Helder Velez

드디어! 감사합니다 :-)
Hernan Arber

훌륭하고 직접적인 솔루션은 더 많은 공감 율을 가져야합니다.
M.Innat

한 행에 맞게 크기를 조정해야하는 더 큰 이미지에서도 작동합니다.
farhanhubble

8

나처럼 @wiggin answer가 작동하지 않고 이미지가 여전히 인라인으로 나타나지 않으면 html 이미지 태그의 'align'속성과 일부 중단을 사용하여 원하는 효과를 얻을 수 있습니다.

# Title

<img align="left" src="./documentation/images/A.jpg" alt="Made with Angular" title="Angular" hspace="20"/>
<img align="left" src="./documentation/images/B.png" alt="Made with Bootstrap" title="Bootstrap" hspace="20"/>
<img align="left" src="./documentation/images/C.png" alt="Developed using Browsersync" title="Browsersync" hspace="20"/>
<br/><br/><br/><br/><br/>

## Table of Contents...

분명히, 당신은 이미지의 크기에 따라 더 많은 휴식을 사용해야합니다.


3
감사합니다! 또한 hspace사진 사이에 충분한 공간이없는 경우 깔끔한 작은 트릭입니다. github이 실제로 구문 분석하는 것을 몰랐습니다.
NullDev

7

앱의 이미지 / 스크린 샷을 추가하고 리포지토리를 깨끗하게 유지하는 가장 좋은 방법입니다.

screenshot저장소에 폴더를 작성하고 표시 할 이미지를 추가하십시오.

이제이 README.mdHTML 코드로 이동하여 테이블을 구성하십시오.

#### Flutter App Screenshots

<table>
  <tr>
    <td>First Screen Page</td>
     <td>Holiday Mention</td>
     <td>Present day in purple and selected day in pink</td>
  </tr>
  <tr>
    <td><img src="screenshots/Screenshot_1582745092.png" width=270 height=480></td>
    <td><img src="screenshots/Screenshot_1582745125.png" width=270 height=480></td>
    <td><img src="screenshots/Screenshot_1582745139.png" width=270 height=480></td>
  </tr>
 </table>

에서 <td><img src="(COPY IMAGE PATH HERE)" width=270 height=480></td>

** 이미지 경로를 얻으려면-> screenshot폴더로 이동하여 image가장 오른쪽에있는 및을 열면 Copy path버튼이 있습니다.

당신은 당신의 저장소에 이와 같은 테이블을 얻을 것이다 --->

여기에 이미지 설명을 입력하십시오


Shukran Maruf :) 당신은 내 하루를 만들었습니다!
MBH

1

@Maruf Hassan의 피기 백하기

# Title

<table>
  <tr>
    <td>First Screen Page</td>
     <td>Holiday Mention</td>
     <td>Present day in purple and selected day in pink</td>
  </tr>
  <tr>
    <td valign="top"><img src="screenshots/Screenshot_1582745092.png"></td>
    <td valign="top"><img src="screenshots/Screenshot_1582745125.png"></td>
    <td valign="top"><img src="screenshots/Screenshot_1582745139.png"></td>
  </tr>
 </table>

<td valign="top">...</td>GitHub Markdown에서 지원됩니다. 높이가 변하는 이미지는 셀 상단 근처에서 세로로 정렬되지 않을 수 있습니다. 이 속성은 당신을 위해 그것을 처리합니다.


나는 이것에 대해 몰랐다. 화면을 자동으로 자연스러운 크기로 정렬하려고했습니다. 감사!
Maruf Hassan
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.