HTML tutorials

HTML CODE SEGMENTS TO COPY

I noticed that there is a severe lack of resources that give people code pieces of code to copy. Often resources like stack overflow fall flat when it comes to trying to learn new things!

So I'm here to give you guys a straight answer.

Directory

Automatically Scaling Image Gallery

Images in rows (autoscale)

An example of this is shown on this page of my website: Skittles Image Gallery

In order to use this, copy the below code into your stylesheet, or put it in <style></style> tags.

.imagegallery img {
    width: 50%;
    min-width: 0;
    padding: 5px;
    box-sizing: border-box;
    flex-grow: 2;
    flex-shrink: 1;
    flex-basis: auto;
    object-fit: cover;
 }
      
.imagegallery {
    width: 98%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: stretch;
}

Then, copy the following text where you want the images in your document.

<div class="imagegallery">
<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
<img src="image4.png">
<img src="image5.png">
</div>

Don't forget to change the src="" links to the images you want.

If you want to edit the width of a specific image, add style='width:__%' to your img tag.