A Centered Responsive Image With Matte And Border
I've been searching for CSS to display images in a gallery style. Ones with a black pen line border on a white matte style background. More importantly, I want them designed so that when they are centered in the viewport 100% of both the image and the matte are visible.
I've taken a few different runs at it and finally got to this:
CSS
*::before,
*::after }
}
:;
:;
:;
}
:;
:;
:;
:;
:;
:;
: );
: );
}
Here's a couple of examples followed by the code. Resize your browser a bunch to see the behavior.
I'm still a yellow belt when it comes to CSS, but as far as I can tell this is doing everything I want.