Let’s look at one method to create a great looking and deadly simple to build image gallery for a website using some simple HTML and CSS.
For this example we will create a full width image gallery that will fit in the images of different aspect ratios. It will also responsively resize to suit smaller devices making it mobile friendly.
Lets start with some basic HTML for the image gallery page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
<meta name="description" content="Responsive Image Gallery">
<meta name="author" content="Tim Wells">
<style type="text/css"> </style>
</head>
<body><div id="gallery">
<img src="images/image-001.jpg">
<img src="images/image-002.jpg">
<img src="images/image-003.jpg">
<img src="images/image-004.jpg">
<img src="images/image-005.jpg">
<img src="images/image-006.jpg">
<img src="images/image-007.jpg">
<img src="images/image-008.jpg">
<img src="images/image-009.jpg">
<img src="images/image-010.jpg">
<img src="images/image-011.jpg">
<img…
