Create an image border when using object-fit: contain
I'm trying to create a 1px black border between two images that are sized using
object-fit: contain: https://codepen.io/j2is/pen/baMagL The border height should match the image size.
The issue is elaborated on the article Image Decorations for Object Fit. I'm wondering if there is an svg filter that can achieve my goal? I tried a dropshadow on the left image using
filter: drop-shadow(1px 0px 1px black) drop-shadow(1px 0px 1px black) but this creates an unwanted shadow on the top and bottom of the image.
I added a 1px border to the right of your left image to separate the two. Is that what you wanted?
.gallery img border-right: 1px solid black display: block position: relative width: 100% height: 100% object-fit: contain