I am currently facing a challenge with creating a responsive image within a grid layout using CSS. The image is not resizing properly when the browser window changes size and is extending beyond its container borders. I have experimented with various techniques such as setting min-height/min-width to 0, using object-fit: contain, adjusting sizes from vh/vw to percentages, trying different max-width/max-height values in pixels and percentages, but I still can't seem to make it work seamlessly within the grid layout. Despite conducting thorough research, I have not been able to find a solution that addresses my specific issue. I believe the solution might be simple, but I am struggling to identify it at the moment.
Additionally, I would prefer to achieve this without relying on external libraries like Bootstrap and solely using HTML and CSS.
To assist in troubleshooting, I have added outlines to different elements for better visibility, although they may not appear in the snippet provided. If you need to inspect the code directly, you can access the site here:
/* Box Sizing */
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
...
Once I resolve the responsiveness issue with the grid, I intend to convert it into a slideshow.
Your assistance is greatly appreciated!