profile picture

Published by Francesco

published
updated

Category: Web, HTML, Tech

View Francesco's Blog

View Francesco's Profile

Report Blog Entry

How to add images on your profile

Simple image


<img width="100%" height="auto" src="IMAGE_URL" alt="TITLE" />

Substitute IMAGE_URL with the link of the image and TITLE with a descriptive title (not necessary at all)

Clickable image

<a href="PAGE_URL" target="_blank">
  <img width="100%" height="auto" src="IMAGE_URL" alt="TITLE " />
</a>

Substitute PAGE_URL with the website link, IMAGE_URL with the link of the image and TITLE with a descriptive title (not necessary at all)

N images in a row
There are a lot of methods, I'll show some of.

Method 1

Add as many <td></td> as you need.

<table>
<tbody>
<tr>
<td><img src="IMAGE_URL" alt=""></td>
<td><img src="IMAGE_URL" alt=""></td>
</tr>
</tbody>
</table>

Method 2

This works for only 2 images.

<div>
<img style="display: block; width: 49%; float: left;" src="IMAGE_URL" alt="">
<img style="display: block; width: 49%; float: right;" src="IMAGE_URL" alt="">
<div style="clear: both;"></div>
</div>

Method 3 (more stylish)

All options for parameters:

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe

align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe


<style>
.images-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between; 
align-items: center; 
align-content: center;
}
.images-row .image-col{
flex: 0 0 calc(50% - 10px); // change percentage here if need more than 2 images for example: 3 images = 100 / 3 = 33.33%
}
.images-row .image-col img{
width: 100%;
height: auto;
max-width: 100%;
}
</style>
<div class="images-row">
<div class="image-col">
<img src="IMAGE_URL" alt="">
</div>
<div class="image-col">
<img src="IMAGE_URL" alt="">
</div>
</div>


11 Kudos

Comments

Displaying 2 of 2 comments ( View all | Add Comment )

🍀 ~ 𝕰𝖗𝖎𝖓 ~ 🍀

profile picture

This is awesome! Thank you so much for updating.


Report Comment

🍀 ~ 𝕰𝖗𝖎𝖓 ~ 🍀

profile picture

How would I get two images on the same line, but with some distance between them? (as in, not right next to each other)


Report Comment