Bagaimana seseorang dapat menampilkan gambar berdampingan dalam GitHub README.md?


165

Saya mencoba menunjukkan perbandingan antara dua foto di README.md saya, itulah sebabnya saya ingin menampilkannya berdampingan. Berikut adalah bagaimana kedua gambar ditempatkan saat ini. Saya ingin menunjukkan dua skema warna Solarized berdampingan, bukan atas dan bawah. Bantuan akan sangat dihargai, terima kasih!


Saya membuat alat web kecil yang memungkinkan Anda untuk menambahkan dan menyelaraskan gambar tanpa menulis markup sendiri: stackoverflow.com/a/32790440/2477619
B12Toaster

1
tautan dari pertanyaan tidak berfungsi
Valentine Zakharenko

Jawaban:


271

Cara termudah yang dapat saya pikirkan untuk menyelesaikan ini adalah dengan menggunakan tabel yang termasuk dalam penurunan harga rasa GitHub.

Untuk contoh spesifik Anda akan terlihat seperti ini:

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

Ini menciptakan tabel dengan Solarized Dark and Ocean sebagai header dan kemudian berisi gambar di baris pertama. Jelas Anda akan mengganti ...dengan tautan yang sebenarnya. The :s adalah opsional (Mereka hanya memusatkan konten dalam sel, yang agak tidak perlu dalam hal ini). Anda juga mungkin ingin memperkecil ukuran gambar sehingga mereka akan menampilkan sisi-sisi yang lebih baik.


8
![](https://...Ocean.png)antara Braces Square Anda dapat menambahkan Alt-Text yang ditampilkan ketika Anda mengarahkan kursor ke gambar.
Adi

Solusi ini lebih baik jika Anda ingin menempatkan lebih banyak gambar pada baris yang sama di github. Saya berhasil menempatkan 4 pada baris yang sama dengan solusi ini tetapi hanya 3 dengan solusi wigging.
vinzee

Hebat! Bekerja dengan Bitbucket juga. (Yah, setidaknya saya bisa memastikan itu berfungsi pada layar permintaan tarik mereka.)
Nate Cook

1
Sayang sekali ini menempatkan perbatasan di sekitar gambar Anda.
nomad

1
@ Epicavi: dalam konteks kode Anda, bagaimana Anda berhemat gambar di dalam tabel?
emagar

115

Anda dapat menempatkan setiap gambar berdampingan dengan menuliskan markdown untuk setiap gambar pada baris yang sama.

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

Selama gambar tidak terlalu besar, mereka akan menampilkan sebaris seperti yang ditunjukkan oleh cuplikan layar file README dari GitHub ini:

gambar sebaris


tidak cukup bekerja untuk saya. salah satu (relatif) gambar adalah gif
Ridhwaan Shakeel

@RidhwaanShakeel Tidak masalah apakah gambar Anda gif atau tidak. Saya berhasil menempatkan dua gif berdampingan dengan metode ini.
Socowi

Tidak berfungsi untuk file gif.
uguros

106

Ini akan menampilkan tiga gambar berdampingan jika gambar tidak terlalu lebar.

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

2
Solusi yang bagus dan mudah, harus memiliki lebih banyak upvotes.
NikxDa

10
Ya, memang, seharusnya ada lebih banyak upvotes! Saya biasa <p align="middle">menyelaraskan gambar di tengah.
Reza Dodge

Apakah mungkin untuk menambahkan judul ke masing-masing gambar?
I_told_you_so

Ini sempurna! Karena memungkinkan untuk menentukan ukuran gambar.
Kaushal28

1
Saya lebih suka menentukan gambar sebagai persentase dari total lebar, misalnya width="32%"saat menyelaraskan 3 gambar
Igor Fobia

37

Mirip dengan contoh lain, tetapi menggunakan ukuran html, saya menggunakan:

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

Berikut ini sebuah contoh

<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"/>

Saya menguji ini menggunakan Remarkable .


4
Saya digunakan <img height="350" hspace="20"/>sebagai pemisah antara gambar dalam suatu masalah ( jawaban wig tidak berfungsi).
EmmanuelMess

WoW editor luar biasa yang luar biasa. Terima kasih.
Helder Velez

AKHIRNYA! Terima kasih :-)
Hernan Arber

Solusi yang bagus dan mudah, harus memiliki lebih banyak Suara positif.
M.Innat

Ini bekerja dengan gambar yang lebih besar juga yang perlu mengubah ukuran agar pas di satu baris.
farhanhubble

8

Jika, seperti saya, Anda menemukan bahwa jawaban @wiggin tidak berfungsi dan gambar masih tidak muncul dalam baris, Anda dapat menggunakan properti 'sejajarkan' dari tag gambar html dan beberapa jeda untuk mencapai efek yang diinginkan, misalnya:

# 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...

Jelas, Anda harus menggunakan lebih banyak istirahat tergantung pada seberapa besar gambar: ya, tapi itu berhasil bagi saya jadi saya pikir saya akan berbagi.


3
Terima kasih! Juga hspacesedikit trik yang rapi jika tidak ada cukup ruang di antara gambar-gambar. Tidak tahu github sebenarnya mem-parsing itu.
NullDev

7

Ini adalah cara terbaik untuk membuat menambahkan gambar / tangkapan layar aplikasi Anda dan menjaga repositori Anda tetap bersih.

Buat screenshotfolder di repositori Anda dan tambahkan gambar yang ingin Anda tampilkan.

Sekarang pergi ke README.mddan tambahkan kode HTML ini untuk membentuk tabel.

#### 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>

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

** Untuk mendapatkan jalur gambar -> Buka screenshotfolder dan buka imagedan di sisi paling kanan, Anda akan menemukan Copy pathtombol.

Anda akan mendapatkan tabel seperti ini di repositori Anda --->

masukkan deskripsi gambar di sini


Shukran Maruf :) Anda membuat hari saya!
MBH

1

Untuk membonceng @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>didukung oleh GitHub Markdown. Gambar dengan ketinggian yang bervariasi mungkin tidak sejajar secara vertikal di dekat bagian atas sel. Properti ini menanganinya untuk Anda.


Saya tidak tahu tentang ini. Itu yang saya cari untuk menyelaraskan layar secara otomatis dengan ukuran alami mereka. Terima kasih!
Maruf Hassan
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.