Currently working on a project that involves creating a website using HTML, CSS, and Bootstrap. The webpage is nearly complete, but I'm encountering an issue with resizing the lightbox photo gallery. My goal is for the images to resize based on screen size - smaller screen = smaller images.
Image Sizes:
- At 100%: https://i.sstatic.net/TXt8u.png
- At 200%: https://i.sstatic.net/KQNz9.jpg
- At 300%: https://i.sstatic.net/qwUl4.jpg
You can view the current version of the website here.
The challenge is to maintain the original position of the images when resizing, instead of scaling them down (e.g., from 4 to 2 to 1). Any advice on how to achieve this would be greatly appreciated!
Code Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
// Required meta tags and external resources
<style>
/* CSS styles go here */
</style>
</head>
<body>
// Content and structure of the webpage
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper-js/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>